grid

0

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.

0

Pomoże ktoś?

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0