grid

Siema,
Ucze sie grida i mam problem.
Otóż mam 5 rows: menu, tresc, tresc, tresc i stopka. (tresc (left i right) mają po 100vh - zajmuja caly ekran). Jak zrobić aby miec jedną klase left right do wszystkich? Niestety muszę wszystkie powtarzać i zmieniać nazwę co jwiąże sie z duża iloscia kodu. A jak już zrobie w 1 klasie to wszystkie na siebie nachodzą.
Jakieś pomysły?

<div id="container">
	<div id="menu"> 
	</div>
	

	<div class="left area">
         left
	</div>

       <div class="right area">
	</div>


	<div class="left1 area">
         left 1	
	</div>
	
	<div class="right1 area">
	</div>


	<div class="left2 area">
        left 2
	</div>
		
	<div class="right2 area">
	</div>


	<div id="footer">
	</div>
</div>

#container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100px 100vh 100vh 100vh 80px;
	grid-template-areas: "menu menu" "left right" "left1 right1" "left2 right2" "footer footer";
}


.left {
	grid-area: left;
}

.right {
	grid-area: right;
}

.left1 {
	grid-area: left1;
}

.right1 {
	grid-area: right1;
}

.left2 {
	grid-area: left2;
}

.right2 {
	grid-area: right2;
}


.area {
	border: 5px solid #000;
	padding: 20px 20px 20px 20px;
}

I jeszcze jeden problem, jak zrobić aby w tym grid dać wyjątkowo tylko dla stopki 100% width (mimo że stopka jest w container)? Niestety !important nie działa.

Pomoże ktoś?