Grafický interaktívny tutoriál s ukážkami čo je "grid"
(ako funguje, ako ho využiť)

Čo je grid, na čo to je dobré pri tvorbe webu

Na pozíciovanie (upratovanie) blokov na web stránke a ich obsahu. Hlavná sila grid je v tom že dokáže obsah upratovať nie len v jednej línii (na to je flex) ale dokáže ladiť aj ako stĺpce tak aj riadky a teda celé mreže (grid) blokov na stránke. Či treba grid alebo (stačí) flex záleží napríklad od toho či treba riešiť aj pomery výšky elementov, presah jednotlivých blokov cez viaceré riadky, prípadne či (prevažne pri responzivite) treba riešiť výrazné zmeny preusporiadania veľkostí ale hlavne aj poradia blokov. To zvláda grid bez problémov (flex tu má limity), v ukážkach to spomeniem čo to dokáže a kedy sa to hodí. Mobilná verzia stránky môže byť vďaka tomuto úplne inak preskladaná ako verzia pre veľké PC monitory (a robí sa to úplne jednoducho...).
Vlastnosti v gride sa riešia na dvoch úrovniach:
- vlastnosti rodiča - grid kontajnera (veľkosti a usporiadanie blokov v mriežke, alebo ich obsahu - definujú sa vo vlastnostiach kontajnera)
- vlastnosti detí - elementov v mriežke - jednotlivých buniek (usporiadanie jednej konkrétnej bunky v mriežke, alebo nastavenie pozície jej obsahu - definuje sa to vo vlastnostiach tej samotnej bunky)

Poďme pekne po poriadku...

Osnova tohoto tutoriálu je nasledovná (klikni na obsah ktorý ťa práve zaujíma):

Kapitola 1 - základná práca s mriežkou

Vytvorme si základnú mriežku...
(+ jej základné zobrazenie)

Na tejto sa bude dobre dať predvádzať čo môžeme ako nastavovať. Môj kontajner grid obsahuje 15 blokov a jeho základné nastavenia sú takéto:
.grid {
max-width: 60ch;
display: grid;
background-color: var(--space_color);
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
grid-template-rows: 5rem 5rem 5rem;
gap: 5px;
padding: 5px;
}
Čo konkrétny príkaz znamená pre danú mriežku budeme preberať postupne. Jednotlivé bloky nemajú teraz žiadne nastavenia definované, iba farbu pozadia aby ich bolo v mriežke vidno a dal sa rozoznať blok od okrajov a medzier.
A výsledok je mriežka ako vidíš tu.

A tu si hneď predstavíme prvú možnosť štýlovania - nastaviť si mriežku ako skladačku z blok elementov (východzí stav), alebo in-line elementov - nastavená maximálna šírka sa odignoruje a nastaví sa minimálna potrebná pre obsah (presne ako je bežné pri "riadkových" - in-line elementoch...).
Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

(pre ďalšie pokusy ale budem používať prevažne už iba základné zobrazenie: display: grid;)

Definujeme jej základnú osnovu (riadky a stĺpce)...

Ďalšie základné nastavenie je definovanie riadkov a stĺpcov mriežky - počty, veľkosti, pomery. Toto nastaví základnú kostru mriežky... Na to sú príkazy:
grid-template-columns: parameters;
grid-template-rows: parameters;
kde parametre môžu byť naozaj rôzne... Percentá, pomery (fr - fragment), pixely, "auto", a aj špecifické pre grid, na stránkach css-tricks je k tomuto dostatok informácií, ja tu dám rovno zopár príkladov aj s grafikou. V praxi sa hodí občas nadefinovať si túto mriežku "hustejšie" a využívať potom pre daktoré bloky viaceré riadky či stĺpce naraz. Pre zaujímavosť - hodnota "auto" je v riadku minimálna výška, ale v stĺpci maximálne využiteľná šírka (keďže máme display: grid; a teda blokové elementy). Čo to robí v praxi vidno na druhom príklade.

Pozor - v praxi často treba definovať každý riadok, inak tam bude pre tie nedefinované v podstate len minimum potrebného priestoru, ako keby som tam dal hodnotu "auto". Ale dá sa to vyriešiť napríklad príkazom grid-auto-rows: 1fr, a všetky nedefinované riadky dostanú rovnakú veľkosť. Tento príkaz ide využiť aj samostatne ak stačí aby všetky riadky boli rovnaké. Jeho fungovanie ukazuje posledný príklad.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:
(8. čka má pridaný obsah a hneď to mení nastavenia aj ostatných blokov v riadku či v stĺpci ak je tam auto...)

Definujeme základné rozloženie blokov v mriežke

Je viacero spôsobov ako si definovať rozloženie blokov v mriežke. Dajú sa jednotlivé bloky priamo definovať (podobne ako neskôr popisujem ladenie pozície a vlastností jednej konkrétnej bunky, akurát to nadefinujeme pre každú ak treba), ale ide to aj pomocou "grid-template-areas" kde sa nadefinuje pomocou jednej osnovy pre celú mriežku ktorý blok má byť ako umiestnený v danej mriežke (aj na viacerých riadkoch či stĺpcoch). Takto sa ľahko rieši aj responzivita - prepíše sa osnova... Osnova sa definuje v hlavnom, rodičovskom elemente! Na toto ešte potom treba aby boli definované jednotlivé prvky osnovy - že ktorý blok má byť ktorý prvok v takto nadefinovanej osnove. Zapisuje sa to ako CSS vlastnosť toho konkrétneho elementu! (tu je príklad):
element {"grid-area: header;}
Aj tu používam základné rozloženie mriežky 5x3, ale už tu nie je 15 blokov, ale iba toľko s koľkými pracujem - teda tu konkrétne 5 (header, main, sidebar, footer logo)! A tie môžu mať rozdielne veľkosti (zaberú rôzne počty malých blokov v mriežke). A ako vidno - môže zostať aj prázdne miesto v mriežke.

POZOR - toto má aj dajaké obmedzenia - útvary v mriežke môžu byť iba štvorce alebo obdĺžniky (pod sebou, vedľa seba), žiadne L-ká takto nevytvoríme...

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Ak by som to chcel riešiť napríklad pre mobily, tak už by som musel prepísať aj rozloženie mriežky, 5x3 už nie je nutné (vhodné) na malom display-i na výšku, a potom zadefinovať aj nanovo rozloženie v mriežke. Príklady na toto sú tu ďalej v tutoriáli ukázané.

A aby sa tieto definície riadkov, stĺpcov a rozloženia blokov v mriežke nedefinovali po jednom, tak existuje aj kombinovaný zápis kde sa to dá napísať do jedného nastavenia. Ale to je na začiatok zbytočne zložité a výsledok na stránke je rovnaký.

Riešime medzery medzi blokmi v mriežke

Tu si vysvetlíme ako sa riešia tie šedé medzery čo tu mám vo vnútri mriežky medzi blokmi. Je na to príkaz "gap" a jeho modifikácie ak potrebujeme medzery ladiť iba zvisle alebo iba vodorovne.
V mojom základnom nastavení mám iba príkaz gap:5px; a teda všetky medzery sú rovnaké - 5 pixelov (vodorovne aj zvisle. Samozrejme idú použiť aj iné jednotky ako len pixely.
Ale pozor - tie medzery po krajoch tento príkaz nerieši (vidno že sa nemenia), tam mám iba v rodičovskom grid elemente padding teraz, inak by bol obsah blokov nalepený na okraje mriežky! To sa rieši normálne štandardne pomocou CSS vlastností, dajme tomu ako teraz - padding rodiča. Tento "gap" príkaz teda rieši čisto iba tie vnútorné medzery čisto medzi blokmi v mriežke.

Dôležité upozornenie!
Pozor na použitie gap pre riadky v dajakých percentách! Robí to galibu - obsah preteká cez materský blok! Posledný príklad to jasne ukazuje (celý blok má jemný červený border pre lepšiu viditeľnosť). Grid akoby nevedel vyrátať tie percentá a dorátať ich do celkovej výšky obaľovacieho elementu... Aj na MDN to vidno v príkladoch.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Riešime zarovnávanie obsahu blokov v mriežke v osi x

Začíname ladiť zarovnávanie obsahu blokov v mriežke. Najskôr v osi x, pomocou príkazu justify-itmes. Tu sa dostávame k podobným vlastnostiam a parametrom ako pri "flex", takže netreba veľa informácií, je to relatívne jasné čo to robí, budú tu iba tlačidlá aby bolo vidno tie zmeny. Bloky dostali ešte minimálnu šírku 70% a text na stred aby to ako tak vyzeralo, lebo inak tam bolo príliš "prázdno"...

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Riešime zarovnávanie obsahu blokov v mriežke v osi y

V osi y sa to robí pomocou príkazu align-items. Parametre v podstate zhodné s predchádzajúcim príkazom, len tu sa upravila výška na minimálne 70% aby boli vidieť zmeny.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Riešime zarovnávanie samotného obsahu mriežky (všetkých jej blokov) v osi x

Začíname ladiť zarovnávanie celého obsahu v mriežke. Najskôr v osi x, pomocou príkazu justify-content. Zasa je to podobné ako pri flexe, stačí pre názornosť pozerať "čo to robí". Ale POZOR aby neboli definované šírky napríklad pomocou fr - pomerov frakcií, potom budú stále roztiahnuté na celú šírku... Napríklad tento kontajner dostal rozloženie grid-template-columns: auto auto 30% auto auto; Ak bolo 1fr 1fr 5fr 1fr 1fr sa sa v šírkach blokov nič nemenilo. Možné sú aj percentá, ale funkcia "stretch" bude fungovať iba ak tam bude aspoň jedno "auto". Nepomohlo ani zadať display: inline-grid; - obsah sa ani vtedy nerozťahoval.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Riešime zarovnávanie samotného obsahu mriežky (všetkých jej blokov) v osi y

V osi y sa to robí pomocou príkazu align-content. Parametre opäť zhodné s predchádzajúcim príkazom. Zasa treba dbať na to čo je definované pri "grid-template-rows" aby to fungovalo. Pevne definované výšky sa taktiež nerozťahujú na celú výšku! Aspoň jedna tam musela byť auto aby fungovala funkcia "stretch". Teraz je pre názornosť: auto 30% auto.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

Kapitola 2 - ladíme vlastnosti jednotlivej bunky alebo jej obsahu v mriežke

Nastavme pozíciu a veľkosť jednej konkrétnej bunke...

V tejto kapitole už toho veľa nebude, ale dám sem len úplne základné (a dôležité) veci. Jedna z nich je ako nastaviť jednej konkrétnej bunke presnú pozíciu v mriežke (veľa krát sa to hodí...). Táto bunka sa zaradí na definované miesto, tam zaberie toľko miesta koľko má nastavené, a všetky ostatné bunky sa posunú "ďalej" kam môžu - v podstate ich odtlačí.
Jedna z možností ako sa to nastavuje je sada dvoch príkazov ktoré definujú pozíciu bunky v oboch osiach:
grid-column: parametre;
grid-row: parametre;
Parameter môže byť jeden, v podstate akoby x-ová alebo y-ová súradnica pre danú bunku, alebo budú dva - kde prvý je štartovacia súradnica a druhý koncová. Tu pozor ako sa berú tie "body" - berú sa tu všetky okraje v mriežke - táto 5x3 má vlastne v osi x 6 okrajov (1-6) a ak budem chcieť bunku po koniec tak posledný bod bude 6! Bude to vidno v príkladoch...
Alebo to vidno na tomto obrázku - takto vidí náš element s grid-om Developer nástroj v prehliadači Mozzila:

Nie je problém takto bunky do seba aj vnárať (aby sa "neposunuly" tak dostanú každá potrebné súradnice aj "spodná", aj "vrchná"). Lepšie budú príklady (sú v záverečnej kapitole). Základ ukážky má súradnice napísané tak že začína v druhom stĺpci (2. okraj od kraja) a končí vo štvrtom stĺpci (5. okraj od kraja), je to jednoduchý zápis. Ako riadok má len 2, to stačí ak neprechádza viacerými (zápis 2/3 je taktiež funkčný). Všimni si ako sa presúvajú bunky okolo pri zmenách... Riadne ich to rozhadzuje. Treba s tým rátať pri vytváraní mriežky stránky! A taktiež je aj tu vidno ako zostáva prázdne miesto ak je menej definovaných buniek ako celkovo vojde do mriežky (posledné dva príklady).

Toto je vlastne druhý spôsob ako vytvoriť osnovu stránky. Pracnejší ako bola text-area, ale umožňuje napríklad to spomenuté vnáranie buniek do seba, to by pomocou text-area nešlo.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

A ešte zrýchlene upraceme obsah v bunke

Máme na výber dve možnosti - buď dva príkazy "justify-self" a "align-self" aby sme ten obsah ladili v jednej alebo v druhej osi, alebo rovno "place-self" a naladíme to naraz... Ukážka je pomocou place-self. Ako parametre sú už známe hodnoty z iných príkazov, takže je to viac menej jasné ako to funguje. Prvý je pre os y, druhý pre os x. Ak je jeden, je pre obe osi.

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

PS: na takéto ladenie obsahu v bunke ale vôbec nie je nutné používať iba grid funkcie a možnosti. Naopak, skôr sa používa flex, prípadne iné (bežné) CSS možnosti. Hociktorá bunka v mriežke je stále aj bežný div kontajner a tak sa s ním aj dá teda aj ďalej pracovať. Ale nie je vylúčená dokonca ani ďalšia mriežka v bloku mriežky, záleží od okolností a požiadaviek...

Kapitola 3 - praktické ukážky rozloženia blokov v mriežke a obsahu v nich pri tvorbe stránky

Dajaké ukážky možnej responzivity stránky

V tejto "praktickej časti" zobrazujem hlavne ukážku možnej responzivity pomocou grid areas. Základ je navrhnúť si vhodnú základnú mriežku... Kľudne radšej hustejšiu, bude viac možností manipulácie s blokmi, ničomu to nevadí ak je viac riadkov alebo stĺpcov. V jednotlivých príkladoch vidno ako je to nakódované a ako to potom vyzerá to rozloženie. Sú tu 3 varianty - akoby "monitor PC", "tablet" a "mobil". Vždy mám iba tie isté bloky (logo, header atď.) a tie príkazy čo vidno v jednotlivých bublinách to potom takto spracujú.

Tu mám ešte zopár vecí k tomuto:
- nejde napríklad 2 krát použiť ten istý blok... Škoda, také logo by som tam hodil aj na viaceré miesta. Ale je to logické, ten blok je iba jeden. A stačí ho teda nakopírovať.
- ak zadáte dačo v tom príkaze "grid-template-areas" čo je nevhodné, tak sa nezobrazí nič (ak by napríklad vychádzal element do L), alebo sa mriežka (občas) úplne rozsype, alebo daktorý (v podstate nedefinovaný) blok zostane "mimo". Tak treba najskôr zadať všetky potrebné hodnoty. Ja tu používam definované výšky v rem aby to dajako vyzeralo, ale v praxi asi treba "auto", alebo ak to vyhovuje viac tak pomery (fr - vidno pre mobilné nastavenie), kto by sa "triafal" pravda do výšky bloku...

Klikni na jednotlivé príkazy aby bolo vidno ako sa mení zobrazenie:

A ešte praktickejšie ukážky - skúšobné stránky...

Aby som to vyskúšal aspoň trochu v praxi tak som vytvoril nejaké skúšobné stránky kde je niekoľko vlastností použitých. Jedna stránka je čisto o kódovaní - má len základné bloky, druhá dostala "pseudo obsah" aby bolo viditeľné praktické použitie. Obe majú podobný základ, sú tam ukážky vnárania sa buniek do seba a náznak toho ako to praktický využiť. (POZOR - tie stránky nie sú responzívne!) Obe sú nakódované iba pomocou definovania rozloženia stĺpcov (grid-template-columns: 1fr 2fr 1fr;) a ladenia pozície pre niektoré konkrétne bunky (a ostatné bunky sú automaticky doukladané). Nie je to pomocou grid-area, a aj preto sa bude ťažšie robiť prípadná responzivita... S tou som tu nerátal, robil som to čisto na pokusy s ladením buniek.

Obrázky náhľadov na stránky sú "klikacie", kód je v jednom súbore aby bol ľahšie k dispozícii na skúmanie.

A tu je ešte odkaz na jednoduchú stránku s mini obsahom ktorá je komplet vytvorená pomocou grid a kde je tá responzivita plne funkčná, a odkaz na jeden "efekt" pomocu gridu, taktiež plne responzívny, tam sa ten grid naozaj hodil...: