Diskuze: grid s gap...stejná šířka sloupce

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

filipfr

Člen

filipfr:19.1.2019 17:54

Ahoj, mám grid s gap , celkem 4 sloupce. V prvních 3 sloupcích mám obrázky, čtvrtý bez. Chci aby všechny sloupce byli stejně široké.
HTML:

<div class="grid-container">
            <div class="grid-item1 hoverable"><img src="kapradi.png"></div>
            <div class="grid-item2 hoverable"><img src="kapradi.png"></div>
            <div class="grid-item3 hoverable"><img src="kapradi.png"></div>
            <div class="grid-item4">Right</div>
            <div class="grid-item5 hoverable"><img src="kapradi.png"></div>
            <div class="grid-item6">Bottom</div>
        </div>

CSS:

* {
    box-sizing: border-box;
}

.grid-item1 {
    grid-column: 1;
    grid-row: 1;
}
.grid-item2 {
    grid-column: 2;
    grid-row: 1;
}
.grid-item3 {
    grid-column: 3;
    grid-row: 1;
}
.grid-item4 {
    grid-column: 4;
    grid-row: 1 / span 2;
}
.grid-item5 {
    grid-column: 1;
    grid-row: 2;
}
.grid-item6 {
    grid-column: 2 / span 2;
    grid-row: 2;
}

.grid-container {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 24% 24% 24% auto;
    grid-gap: 5px;
    background-color: lightgrey;
    border: 5px solid lightgrey;
}

.grid-container > div {
    background-color: blue;
}

Takhle to mám "uplácané", ale není to ono.

Zkusil jsem: Zkoušel jsem dát sloupcům 25%-nelze, protože gap není součástí elementu a tak pravý sloupec "přeteče".
Dále dát gap šířku v % a dopočítat do 100% - opět nelze.
Dát všem sloupcům width: auto; Pravý sloupec je užší, než ostatní.
A pak jsem zkusil cokoliv, co mě ještě napadlo.

Chci docílit: Aby byli všechny sloupce stejně široké, nikoliv jen přibližně.

Odpovědět

19.1.2019 17:54

Honza Bittner

Tvůrce

Honza Bittner:19.1.2019 19:38

Ahoj,

grid má speciální jednotku 1fr, která značí jeden díl z celku, a celek se napočítá sám. Pokud máš např. 1fr a 3fr, celek je 4fr a slouží to jako 25 % a 75 % a pracuje vše s ohledem na gap.

To co chceš je tedy

grid-template-columns: 1fr 1fr 1fr 1fr;

nebo

grid-template-columns: repeat(4, 1fr);

Měl jsem o CSS gridu talk, tak se můžeš kouknout na prezentaci https://goo.gl/nNV8YX

Editováno 19.1.2019 19:39

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

19.1.2019 19:38

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

filipfr

Člen

filipfr:19.1.2019 20:00

Paráda, díky. Vyřešeno.

Nahoru Odpovědět

19.1.2019 20:00

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.