Táto časť bude trocha rozsiahlejšia, ale priložím sem zopár príkladov na lepšie pochopenie, začneme ale od začiatku.
Grid element slúži na vytvorenie stĺpcov pre vloženie ľubovolného obsahu. Funguje to tak, že šírka stránky sa delí na dvanásť častí, ktoré sa môžu aj zlučovať, vzniká ako keby mriežka, takzvaný grid, do ktorého sa môže vkladať obsah. Grid reaguje na responzivitu (šírku stránky) a jednotlivé stĺpce môžu meniť svoju vlastnosti. Môžu sa skryť, zväčšiť, zmenšiť, odsunúť.
2. stĺpec
- Vložíme si nový “Content” prvok, Grid Element > Gridelements 2 Columns
2. V konfigurácií tohto prvku musíme vyplniť nastavenia pre “Column A” a “Column B”, ktoré predstavujú už naše dva nové stĺpce. “Container” je prvok ktorý tieto dva “Columns” obaľuje, ten si ale všímať nemusíme.
3. Najpodstatnejšie nastavenie je určiť šírku samotného Column, ak chceme aby Columns zaberal na stránke šírku o jednej polovici vyberieme col-lg-6. 12 je plná šírka, deleno 2 je 6 takže preto col-lg-6. Column B, tu nám nič iné neostáva iba doplniť zostavajúci šírku takže tiež vyberieme col-lg-6
Ak by sme Column A chceli mať užší ako Column B nastavíme napríklad COLUMN A na col-lg-4 a COLUMN B col-lg-8.
Takto vytvorené bloky majú zvolenú šírku na desktop zariadeniach a na tablete a mobile budú uložené pod sebou s plnou šírkou. Ďalej v časti “responzívne nastavenie gridu”.
4. Po uložení Grid Element sa vrátime späť na editáciu obsahu stránky a vidíme, že sme vytvorili rôzne bloky predstavujúce stĺpce, kde môžeme vkladať obsah.
Responzívne nastavenie gridu
Ako ste si mohli všimnúť, pri voľbe parametru col-lg-6 obsahuje aj tam aj kľúčové slovo lg, tento kľúč lg hovorí, že šírka 6 dielov bude aplikovaná na šírke zariadenia, ktoré spadá pod lg (large). Každý tento klúč sm, md, lg zastupuje určité rozpätie šírky okna prehliadača. Napr. md je od 992px do 1119px. Lg 1200px a viacej. Sm je menej ako 480px. Pre lepšiu predstavivosť je tu nasledovná tabuľka kľúčov so zariadeniami:
| xs (< 480px) | sm (> 768px) | md (> 992px) | lg (> 1200px) | |
| Desktop | o | o | o | x |
| Tablet | o | x | ||
| Mobile | x |
x – značí optimálnu hodnotu pre dané zariadenie
o – ak nastavíme iba menšiu hodnotu napr. sm a žiadnu inú, rozmer sa zdedí aj na md a lg
Pre zaujímavosť – typické rozlíšenia zariadení od najpoužívanejších
Desktop: 1920x1080px, 1366x768px, 1440x900px
Tablet: 768x1024px, 800x600px, 1024x600px
Mobile: 640x360px, 667x375px, 720x360px
Podľa týchto hodnôt môžeme vidieť, že rozmery v rozmedzí md sa nepoužívajú, keď tak iba na Tabletoch a to iba ak sú používané na šírku, prípadne môže mať užívateľ taký rozmer na Desktop zariadení, keď sa zmenšuje okno.
Rôzné ukážky zložitejšieho gridu
Tak ako je znázornené vo vizuálnej ukážke, tak treba nastaviť jednotlivé Columns aj v Type3.
Ukážka 2.
Poznámka
Vždy je potrebné zložiť riadok na desktope tak, aby odpovedal plnej šírke 12 políčok (stĺpce). Na menších zariadeniach sa už obsah zalamuje. Nezalamujte teda políčka už na desktope, ale treba vytvoriť nový grid element s novými stĺpcami.
