Diskuze: Grid-mřížkované rozvržení
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Honza Bittner:23.1.2018 20:14
Jdeš na to totiž špatně. Nejdříve ti zkusím vysvětlit % vs fr.
Takto nějak to máš teď a jak můžeš vidět, pokud přidáš mezery (gap), tak se to rozsype a máš obsah mimo. Proto není vhodný používat procenta, ale raději používat jednotku fr, což je jednotka, která vezme zbylé volné místo a rozseká ho na tolik dílků, kolik je součet všech fr, tj. to dělá takové poměry, které můžeš znát z flexboxu u flex-grow atp.
Takže všechny procenta nahradíme fr. Samozřejmě můžeš procenta používat, pokud to tvůj speciální případ vyžaduje, ale toto použití (při dopočítávání se celku) je kinda špatné.
https://jsfiddle.net/Lnrchsr7/1/
Teď, jak jistě vidíš, černě je označený .container, červeně .obal (tvůj grid). To znamená, že pokud použiješ procenta na výšku, nemáš prakticky možnost z čeho vybírat, a výšku určí obsah položek, protože prostě ten grid nemá výšku. To můžeš napravit nastavením výšky.
https://jsfiddle.net/Lnrchsr7/2/
Pokud chceš pak používat %, určitě můžeš, ale stejný problém jako u sloupečků. Teď třeba můžeme udělat 20 % pro první řádek, a druhý ať se vyplní do zbytku.
https://jsfiddle.net/Lnrchsr7/4/
ALE, teď si můžeš všimnout, že když jsem přidal další prvky na konec, tak tam jsou prvky, které mají minimální výšku, prostě aby se vešly, a zbytek se rozdělí tak, jak jsme uvedli. Toto je rozdíl mezi explicitním a implicitním gridem. První 2 řádky jsou součástí explicitního gridu, zbytek součástí implicitního gridu.
No a pokud chceš upravit tyto prvky co "přetekly" do implicitní části, používáš na ně pravidla s -auto- namísto -template-, tj. např. grid-auto-rows. Tj. pro tento příklad: 1. 20 %, 2. 2 fr a zbytek 1fr.
https://jsfiddle.net/Lnrchsr7/5/
S CSS gridem se dá dělat hodně moc srandiček a je to opravdu téměř
perfektní nástroj, zejména ve spojením s Flexboxem. (a ne, CSS Grid není
náhrada za Flexbox, ani naopak; jsou věci, které uděláš v obojím, jsou
věci, které uděláš jen v jednom z nich; a jsou i věci, které neuděláš
ani v jednom) 
Zrovna v pátek budu mít přednášku na téma CSS gridů (a CSS proměnných), viz https://www.itnetwork.cz/…k/detail/153
+20 Zkušeností
+2,50 Kč
Jan Jedlička:23.1.2018 20:55
diky za rychlou odpověď. takže jestli to chápu, je lepší tedy v
případě gridu používat spíše jednotky fr ? jestě můžu poprosit o
trošku bližší rozdíl mezi explicitní a implicitní? nebo je možné to
tady najít na serveru? v knížce toho totiž moc nemám a rád bych tomu
porozuměl. rád bych v pátek přišel na přednášku, ale jsem nemocný 
. asi náhodou nebude nějaké video
z přednášky? ještě bych tě chtěl poprosit o radu, je nějaký dobrý
studijní materiál pro výuku CSS3?
Honza Bittner:23.1.2018 21:05
No, explicitní část je ta, kterou ty sám ručně napíšeš – že máš 3 sloupečky a 2 řádky. Pro tuto část stanovíš rozměry atp.
Implicitní část je ta, která "jakoby přetekla" to, co jsi nastavil. Když řekneš, že máš 3 sloupečky a 2 řádky a najednou máš prvky, které jsou na 3., 4., ... řádku, jsou v implicitní části. A i jen ty můžeš nastavovat pomocí toho -auto- namísto -template-.
Přikládám obrázek, červěně je označena explicitní část a šipka míří na konec explicitních řádků gridu. (zvýrazněná lajna). Zeleně je označena implicitní část (to, co se vytvoří mimo to, co nastavíš). Tyto lajny jsou z Firefoxu, který má tyto super možnosti v devtools (F12, rozložení), kde např. oproti tomu Chrome nemá až tak hezké debugovací nástroje pro grid, doufám že jen prozatím.
No, určitě se podívej např. na https://cssgrid.io, kde je celý seriál videí o css gridu,
opravdu dobrých videí (v AJ). Je to zadarmo, takže žádné výdaje.
Případně, pokud máš raději čtený text, tak mohu doporučit https://css-tricks.com/…-guide-grid/.
Zobrazeno 4 zpráv z 4.