Toto je malá ukážka rozloženia obsahu na stránke s využitím "grid" funkcií.
V kóde je všetko perfektne okomentované čo je kde použité aby to takto vyzeralo.
Stránka nie je optimalizovaná (pre mobily a tablety), to nebolo účelom, ide tu čisto o to čo sa dá pomocou
gridu
vytvoriť a ako to treba nakódovať... Príklad na responzivitu bude iný.
Stĺpce sú nastavené ako 1fr 2fr 1fr, výška riadkov je na výber (klikni):
grid-auto-rows: 1fr;
(Elementy budú mať
výšky stabilne prepočítané aby sedeli definované pomery. Veľkosť toho 1fr sa určí automaticky podľa toho aký
je najvyšší obsah v bloku!, to sa zoberie ako 1fr.)
grid-auto-rows: auto;
(Elementy sa výškovo
prispôsobujú ako treba podľa obsahu, takže občas sa ten pomer
rozladí, ale stále to je "upratané"... A nie sú tak veľké prázdne miesta.)