September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!
Avatar
filipfr
Člen
Avatar
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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na filipfr
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í
+1 bodů
Řešení problému
Nahoru Odpovědět
19.1.2019 19:38
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
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.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.