• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS Grid - Jak scalić kolumny, podział kolumn

VPS Starter Arubacloud
+2 głosów
937 wizyt
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

+2 głosów
odpowiedź 3 października 2020 przez VBService Ekspert (251,210 p.)
edycja 4 października 2020 przez VBService

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

<!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.

+2 głosów
odpowiedź 4 października 2020 przez VBService Ekspert (251,210 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) wink. 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>

 

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

Kurcze, ale z Ciebie pomysłowy Dobromir yeswink  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 devil 

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 wink 

Dziękuję ślicznie za pomoc!!

Pozdrawiam.

1
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 laugh

* {
    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 ?!?!?!

+1 głos
odpowiedź 3 października 2020 przez Wiciorny Ekspert (269,120 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/

width 50%

 

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

Hej, wyżej napisałem trochę dokładniej o co mi chodziło.yeswink

Podobne pytania

0 głosów
1 odpowiedź 136 wizyt
0 głosów
1 odpowiedź 215 wizyt
pytanie zadane 10 października 2018 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 680 wizyt
pytanie zadane 25 lipca 2018 w HTML i CSS przez agipacz Początkujący (460 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...