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.