Black friday Black friday
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
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.