CSS Grid - Jak scalić kolumny, podział kolumn

pytanie zadane 3 października 2020 w HTML i CSS przez new103 Nowicjusz (190 p.)

Witam,

Czy jest jakiś sposób, aby połączyć / scalić kolumny tak, aby miejsce mogło zostać podzielone po równo pomiędzy elementy (jest nieparzysta liczba kolumn i nie mogę użyć wartości ze "span" np. dla content lub img).

Dokładnie chodzi mi o to, aby rozdzielić pozostałe miejsce w wierszu równo pomiędzy content1 i content2 (tak, aby zajmowały cały wiersz) i podobnie ze wszystkimi img. Ma ktoś jakiś pomysł?

Tutaj część CSS:

grid-template-areas:
        "nav nav nav nav nav"
        "foto foto foto foto foto"
        ". . content1 content2 ."
        "video1 video2 video3 video4 video5"
        ". img1 img2 img3 ."
        "footer footer footer footer footer";

#content-1 {
    background: purple;
    grid-area: content1;
}

#content-2 {
    background: brown;
    grid-area: content2;
}

Z góry dziękuję i pozdrawiam.

3 odpowiedzi

odpowiedź 3 października 2020 przez VBService Ekspert (256,600 p.)
edycja 4 października 2020 przez VBService

Nie jestem pewien, czy o taki efekt chodziło Tobie.

<!DOCTYPE html>
<html lang='pl'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
    * {
        box-sizing: border-box;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 0.5fr 1fr 1fr 1fr 2fr 0.5fr;
        gap: 1px 1px;
        grid-template-areas:
            "nav1 nav2 nav3 nav4 nav5"
            "foto1 foto2 foto3 foto4 foto5"
            "content-wrap content-wrap content-wrap content-wrap content-wrap"
            "video1 video2 video3 video4 video5"
            "img-wrap img-wrap img-wrap img-wrap img-wrap"
            "footer1 footer2 footer3 footer4 footer5";
        width: 100vw;
        height: 100vh;
    }
    div {
        font: 1.2em bold monospace;
        color: white;
    }
    div[class^="nav"] {
        background-color: darkgreen;
    }
    div[class^="foto"] {
        background-color: darkcyan;
    }
    div[class^="video"] {
        background-color: orange;
    }
    div[class^="footer"] {
        background-color: gold;
    }
    .nav1 { grid-area: nav1; }
    .nav2 { grid-area: nav2; }
    .nav3 { grid-area: nav3; }
    .nav4 { grid-area: nav4; }
    .nav5 { grid-area: nav5; }
    .foto1 { grid-area: foto1; }
    .foto2 { grid-area: foto2; }
    .foto3 { grid-area: foto3; }
    .foto4 { grid-area: foto4; }
    .foto5 { grid-area: foto5; }
    .content-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 1px;
        grid-template-areas:
        "content1 content2";
        grid-area: content-wrap;
    }
    .content1 {
        grid-area: content1;
        background: purple;
    }
    .content2 {
        grid-area: content2;
        background: brown;
    }
    .video1 { grid-area: video1; }
    .video2 { grid-area: video2; }
    .video3 { grid-area: video3; }
    .video4 { grid-area: video4; }
    .video5 { grid-area: video5; }
    .img-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0px 1px;
        grid-template-areas:
        "img1 img2 img3";
        grid-area: img-wrap;
    }
    .img1 {
        grid-area: img1;
        background-color: lightgreen;
    }
    .img2 {
        grid-area: img2;
        background-color: green;
    }
    .img3 {
        grid-area: img3;
        background-color: red;
    }
    .footer1 { grid-area: footer1; }
    .footer2 { grid-area: footer2; }
    .footer3 { grid-area: footer3; }
    .footer4 { grid-area: footer4; }
    .footer5 { grid-area: footer5; }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="nav1">nav</div>
    <div class="nav2"></div>
    <div class="nav3"></div>
    <div class="nav4"></div>
    <div class="nav5"></div>
    <div class="foto1">foto</div>
    <div class="foto2"></div>
    <div class="foto3"></div>
    <div class="foto4"></div>
    <div class="foto5"></div>
    <div class="content-wrap">
        <div class="content1">content1</div>
        <div class="content2">content2</div>
    </div>
    <div class="video1">video</div>
    <div class="video2"></div>
    <div class="video3"></div>
    <div class="video4"></div>
    <div class="video5"></div>
    <div class="img-wrap">
        <div class="img1">img1</div>
        <div class="img2">img2</div>
        <div class="img3">img3</div>
    </div>
    <div class="footer1">footer</div>
    <div class="footer2"></div>
    <div class="footer3"></div>
    <div class="footer4"></div>
    <div class="footer5"></div>
  </div>
</body>
</html>

komentarz 4 października 2020 przez new103 Nowicjusz (190 p.)

Hej, dzięki za wyczerpującą odpowiedź. Na rysunku Twój grid wygląda prawie tak, jak chcę zrobić z tą różnicą, że video ma być x5 (osobno) tak jak u mnie. Nie dokładnie sprecyzowałem mój problem, więc wkleję mój kod css i html:

Kontener Grid:

<div class="container">
        <nav>Navbar</nav>
        <div class="foto">Big Foto</div>
        <div id="content-1">Content1</div>
        <div id="content-2">Content2</div>
        <div class="video1">Video1</div>
        <div class="video2">Video2</div>
        <div class="video3">Video3</div>
        <div class="video4">Video4</div>
        <div class="video5">Video5</div>
        <div class="img1">Img1</div>
        <div class="img2">Img2</div>
        <div class="img3">Img3</div>
        <footer>Footer</footer>
    </div>

CSS:

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 1.2fr 1fr 1.2fr 2.5fr 0.5fr;
    grid-template-areas:
        "nav nav nav nav nav"
        "foto foto foto foto foto"
        ". . content1 content2 ."
        "video1 video2 video3 video4 video5"
        ". img1 img2 img3 ."
        "footer footer footer footer footer";
    grid-gap: 0.2rem;
}

nav {
    background: green;
    grid-area: nav;
}

.foto {
    background: #a5a531;
    grid-area: foto;
}


#content-1 {
    background: purple;
    grid-area: content1;
}

#content-2 {
    background: brown;
    grid-area: content2;
}

.video1 {
    background: gray;
    grid-area: video1;
}

.video2 {
    background: #2121c6;
    grid-area: video2;
}

.video3 {
    background: orange;
    grid-area: video3;
}

.video4 {
    background: #fa9e9e;
    grid-area: video4;
}

.video5 {
    background: #8f8faf;
    grid-area: video5
}

.img1 {
    background: #71f471;
    grid-area: img1;
}

.img2 {
    background: #008076;
    grid-area: img2;
}

.img3 {
    background: #e34460;
    grid-area: img3
}

footer {
    background: gold;
    grid-area: footer;
}

Chciałbym aby content1 i content2 zajmowały po równo całą wolną przestrzeń, tak samo elementy img1,2,3. Wyobraź sobie, że jest nie 5 a 6 kolumn i do:

#content-1 {
    background: purple;
    grid-area: content1;
}

#content-2 {
    background: brown;
    grid-area: content2;
}

dodasz grid-column: span 3 (czyli każdy z content zabierze po 3 części z 6 czyli podzieli na pół wolną przestrzeń). - taki efekt chciałbym uzyskać.

Wiem, że można umieścić np content1 i 2 w osobnym divie i wyśrodkować je za pomocą flexa, ale muszę zrobić w projekcie responsywność za pomocą @media i muszę tam dodać w kontenerze :

grid-template-columns: 1fr;

Aby wszystkie elementy (osobno z siatki grid) ułożyły się pod sobą.

I teraz po moim długim wywodzie:

Czy jest w grid jakieś polecenie/właściwość, która pozwoli elementom content1 oraz content2 zająć po równo całą wolną przestrzeń?

Cz może trzeba jakoś inaczej ustawić elementy w :

grid-template-areas:
        "nav nav nav nav nav"
        "foto foto foto foto foto"
        ". . content1 content2 ."
        "video1 video2 video3 video4 video5"
        ". img1 img2 img3 ."
        "footer footer footer footer footer";

Wiem, że kropki to nie zajęte miejsce a główny problem to parzysta liczba itemów - nieparzysta liczba kolumn w wierszu.

odpowiedź 4 października 2020 przez VBService Ekspert (256,600 p.)
edycja 4 października 2020 przez VBService

Zastosowałem trik, podzieliłem siatkę grid na 30 frakcji (fr), bo jest podzielna bez reszty przez 2 (content), 5 (video), 3 (img) . Mam nadzieję, że o taki efekt Tobie chodziło. CodePen

<!DOCTYPE html>
<html lang='pl'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
    * {
        box-sizing: border-box;
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    .container {
        display: grid;
        grid-template-columns: repeat(30 1fr);
        grid-template-rows: 0.5fr 1.2fr 1fr 1.2fr 2.5fr 0.5fr;
        gap: 0.2rem;
        width: 100vw;
        height: 100vh;
    }
    div, nav, footer {
        font: 1.2em bold monospace;
        color: white;
    }
    .navbar {
        grid-area: 1 / 1 / 1 / 30;
        background: green;
    }
    .foto {
        grid-area: 2 / 1 / 2 / 30;
        background: #a5a531;
    }
    .content1 {
        grid-area: 3 / 1 / 3 / 15;
        background: purple;
    }
    .content2 {
        grid-area: 3 / 15 / 3 / 30;
        background: brown;
    }
    .video1 {
        grid-area: 4 / 1 / 4 / 6;
        background: gray;
    }
    .video2 {
        grid-area: 4 / 6 / 4 / 12;
        background: #2121c6;
    }
    .video3 {
        grid-area: 4 / 12 / 4 / 18;
        background: orange;
    }
    .video4 {
        grid-area: 4 / 18 / 4 / 24;
        background: #fa9e9e;
    }
    .video5 {
        grid-area: 4 / 24 / 4 / 30;
        background: #8f8faf;
    }
    .img1 {
        grid-area: 5 / 1 / 5 / 10;
        background-color: #71f471;
    }
    .img2 {
        grid-area: 5 / 10 / 5 / 20;
        background-color: #008076;
    }
    .img3 {
        grid-area: 5 / 20 / 5 / 30;
        background-color: #e34460;
    }
    .footer {
        grid-area: 6 / 1 / 6 / 30;
        background-color: gold;
    }
</style>
</head>
<body>
    <div class="container">
        <nav class="navbar">Navbar</nav>
        <div class="foto">Big Foto</div>
        <div class="content1">Content1</div>
        <div class="content2">Content2</div>
        <div class="video1">Video1</div>
        <div class="video2">Video2</div>
        <div class="video3">Video3</div>
        <div class="video4">Video4</div>
        <div class="video5">Video5</div>
        <div class="img1">Img1</div>
        <div class="img2">Img2</div>
        <div class="img3">Img3</div>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

komentarz 4 października 2020 przez new103 Nowicjusz (190 p.)

Kurcze, ale z Ciebie pomysłowy Dobromir Dokładnie o taki efekt mi chodziło i domyślam się, że nie ma po prostu innej możliwości, że jak są 2 elementy i 5 kolumn, żeby obdzielić je po równo

Teraz muszę się wgryźć w temat, bo myślałem że grid-area można użyć tylko, jak się nada nazwy w kontenerze (grid-template-areas) a potem te nazwy określają zajmowane miejsce w grid.

Tutaj chyba znalazłem odpowiedź:

https://css-tricks.com/snippets/css/complete-guide-grid/

Tak w ramach eksperymentu zakombinowałem jeszcze inaczej: dodałem jeszcze jedną kolumnę i wtedy porozciągałem elementy - tak aby zajmowały po 2 kolumny

Dziękuję ślicznie za pomoc!!

Pozdrawiam.

komentarz 4 października 2020 przez new103 Nowicjusz (190 p.)
edycja 4 października 2020 przez new103

No jeszcze znalazłem nieścisłość: element Content1 zajmuje 14 kolum i jest mniejszy od Content2 - ten zajmuje 15 kolumn.

Podobnie z elementami poniżej: wszystkie pierwsze elementy od lewej strony, mają jedną kolumnę mniej(fajnie widoczne w firefoksie z włączonymi liniami grid).

Ale już wyczaiłem o co chodzi w Twoim zapisie z grid-area i wieczorem pokażę mój kod do oceny.

Edit:

Ok: przyjmijmy, że już jest wieczór

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: 0.5fr 1.2fr 1fr 1.2fr 2.5fr 0.5fr;
    gap: 0.2rem;
    width: 100vw;
    height: 100vh;
}

div,
nav,
footer {
    font: 1.2em bold monospace;
    color: white;
}

.navbar {
    grid-area: 1 / 1 / 2 / 31;
    background: green;
}

.foto {
    grid-area: 2 / 1 / 3 / 31;
    background: #a5a531;
}

.content1 {
    grid-area: 3 / 1 / 4 / 16;
    background: purple;
}

.content2 {
    grid-area: 3 / 16 / 4 / 31;
    background: brown;
}

.video1 {
    grid-area: 4 / 1 / 5 / 7;
    background: gray;
}

.video2 {
    grid-area: 4 / 7 / 5 / 13;
    background: #2121c6;
}

.video3 {
    grid-area: 4 / 13 / 5 / 19;
    background: orange;
}

.video4 {
    grid-area: 4 / 19 / 5 / 25;
    background: #fa9e9e;
}

.video5 {
    grid-area: 4 / 25 / 5 / 31;
    background: #8f8faf;
}

.img1 {
    grid-area: 5 / 1 / 6 / 11;
    background-color: #71f471;
}

.img2 {
    grid-area: 5 / 11 / 6 / 21;
    background-color: #008076;
}

.img3 {
    grid-area: 5 / 21 / 6 / 31;
    background-color: #e34460;
}

.footer {
    grid-area: 6 / 1 / 7 / 31;
    background-color: gold;
}

Poprawiłem również zajmowane wiersze, co ciekawe po wstawieniu przecinka w - repeat(30, 1fr) grid inaczej się zachował, będę to jeszcze analizował.

Teraz wydaje mi się, że jest wszystko jak być powinno.

Edit2:

Ok tropem jest to, że siatka grid jest liczona od 1 nie od 0 czyli musi być 31 linii - czyli 30 kolumn (1 kolumna - linie 1 / 2)

Edit3:

30fr - linie od 1 do 31, PRZECINEK TUTAJ ROBI RÓŻNICĘ JEDEJ LINII ?!?!?!

odpowiedź 3 października 2020 przez Wiciorny Ekspert (281,450 p.)

 display: inline-block;

https://www.w3schools.com/css/css_inline-block.asp tego spróbuj może dla elementu który opakowuje contenty, albo w nich

Jeszcze jest opcja aby oba elementy stanowily po 50% szerokości np. rodzica Poczytaj może też tutaj : https://css-tricks.com/equidistant-objects-with-css/