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


Tento "interaktívny návod" je pokračovaním môjho mini návodu o základnom fungovaní a používaní flex-u pri tvorbe web layoutu - "flex-box tutoriál".
Ak ti vyhovuje radšej videoobsah, tak napríklad toto video od toho istého tvorcu ako video o flex-e sa oplatí pozrieť.


Nie je to úplne plnohodnotný a komplexný sprievodca ako funguje grid, ale je tu veľmi názorne ukázaný základ jeho fungovania. To hlavné na pochopenie fungovania, prípadne možností kde to využiť. A môže to byť taká rýchla interaktívna nápoveda.
Celý kód je v jednom súbore (aj CSS, aj JS scripty v jednom html) aby bolo možné si ho jednoducho prekopírovať do svojho editora a ďalej s ním pracovať a skúšať si prípadne svoje úpravy v kóde. Myslím že pre začiatočníkov to bude fajn pomôcka...
Asi plnohodnotný prehľad k tomu je aj na stránkach css-tricks.com , odtiaľto som celé podklady aj ja čerpal. Tam to rozobrali naozaj do detailov.

Majte na pamäti že správny výsledok layoutu stránky získate až správnou kombináciou tu predstavených jednotlivých možností!!!

Č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 a ukážky programovania vlastností samotnej mriežky - rodiča, a pozíciovanie jej blokov

Kapitola 2 - ukážky programovania vlastností detí (konkrétnych buniek v mriežke) prípadne obsahu v danej jednotlivej bunke

Kapitola 3 - praktické ukážky využitia gridu pre tvorbu stránky - rozloženie obsahu s využitím viacerých možností gridu naraz (lebo pri týchto ukážkach jednotlivých inštrukcií občas nie je vidno aký to má celkový zmysel a efekt na veľkej stránke...)

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 (tu 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 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 zobrazenie display: grid;.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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. 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). 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.

Pozor - 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 s stĺpci ak je tam auto...)





1
2
3
4
5
6
7
8
2.riadok
9
10
11
12
13
14
15

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ť, 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 responzivita - prepíše sa osnova... Na toto treba aby boli definované jednotlivé prvky osnovy - že ktorý blok má byť ktorá časť osnovy (tu je príklad):
element {"grid-area: header;}
Aj tu používam základné rozloženie mriežky 5x3, ale už sa tu nedefinuje 15 blokov, ale iba toľko s koľkými pracujem - teda tu konkrétne 5 (jeden pre header, jeden pre main, jeden pre sidebar, jeden pre footer a jeden pre logo)!

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:



header
main
sidebar
footer
logo

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 vhodné na malom display-i na výšku, a potom zadefinovať bloky. 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, ale pozor - nie tie po krajoch, to sa takto nerieši, tam mám iba padding teraz, inak by bol obsah blokov nalepený na okraje mriežky!!). Samozrejme idú použiť aj iné jednotky ako len pixely.

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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:





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

V osi y sa to robí pomocou príkazu align-itmes. 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:





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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:







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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:







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Myslím že toto by stačilo na začiatky, všetko hlavné čo sa týka ladenia samotnej mriežky je tu vidno. Ešte je zopár špeciálnych možností čo grid vie, všetko je spomenuté na stránke css-tricks.com. Alebo napríklad jedna zaujímavá funkcia je aj v tomto videu od šikovného experta - "subgrid" - akoby mriežka v mriežke.

A môžeme ísť ešte teda ladiť jednotlivé bunky mriežky:

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.
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...
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 tu vidno ako zostáva prázdne miesto ak je menej definovaných buniek ako celkovo vojde do mriežky (posledné dva príklady).

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






1
2
3
4
5
6
7
8
9
10
11
12
+++
+++

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:







1
2
3
4
XXX
XXXXX
XXX
6
7
8
9

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ý (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) kto by sa triafal pravda do výšky bloku...

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



header
main
sidebar
footer
logo
menu

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.

grid1 grid1

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...:

grid3 grid4
© Daniel Gago (2021)