PHP týden Předvánoční slevová akce
Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter
Využij předvánočních slev a získej od nás 20 % bodů navíc zdarma! Zároveň také probíhá PHP týden se slevou na e-learning až 80 %

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

Aktivity (2)
Avatar
filipfr
Člen
Avatar
filipfr:19. ledna 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. ledna 17:54
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na filipfr
Honza Bittner:19. ledna 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. ledna 19:39
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět
19. ledna 19:38
Student FIT ČVUT. In love with Dart &...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
filipfr
Člen
Avatar
Odpovídá na Honza Bittner
filipfr:19. ledna 20:00

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

 
Nahoru Odpovědět
19. ledna 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.