7. diel - Úvod do CSS grid systémov

V minulej lekcii, Flexbox - Tvorba moderných layoutov, sme si ukázali CSS flexbox.

Dnes sa pozrieme na grid systémy. Ukážeme si, akí "predchodcovia" grid systémov sa používali a nakoniec si predstavíme dva CSS frameworky, ktoré túto problematiku komplexne riešia.

Úvod do grid systémov

Na začiatok by sa pristalo problematiku gridov načrtnúť, začnime pekne od začiatku. Rozdelenie obsahu do pravidelnej mriežky sa netýka len webov, ale tento princíp je používaný v podstate už od stredoveku. Platí nielen pre text, ale aj pre ilustrácie. Nájdeme ho v novinách a časopisoch. Možno viete, že logá väčšiny firiem sú tiež vytvorené na základe pravidelných tvarov, ktoré k sebe lícujú. Okrem toho, že mriežka plní estetickú funkciu, je pre ľudí takto zarovnaná informácia oveľa lepšie spracovateľná. Pozrime sa na layout populárnej šablóny Gantella od frameworku Bootstrap pre administráciu webu:

Šablóna Gantella pro Bootstrap - Responzívne webdesign

Vidíme, že layout je rozdelený do šiestich pomyselných stĺpcov. Všetky kontajnery na stránke majú potom veľkosť len a iba v násobkoch veľkosti týchto stĺpcov. Celý web pôsobí veľmi celistvým dojmom.

Ak budeme prvky pozíciovať ako nás napadne, môžeme dopadnúť ako legendárne stránky Penziónu na Hrubých lúkach:

Stránky penziónu na Hrubých lúkach - Responzívne webdesign

Dnes majú našťastie už iné stránky.

Tabuľky

V dobách už dávno minulých sa na tvorbu layoutov internetových stránok používali tabuľky. Ich výhodou bolo, že obsah webu bol opticky zarovnaný do tabuľky, takže rozloženie pôsobilo pravidelne a vyvážene. Takáto tabuľková kostra zastaraného webu by mohla vyzerať napr. takto:

<table>
    <tr>
        <td colspan="2"><h1>Header</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Content...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Footer</small></td>
    </tr>
</table>

Výsledok v prehliadači:

Tabular layout

tabular_layout.html

Tabuľky sa pre pozíciovanie prvkov na stránke už nepoužívajú kvôli 2 závažným nedostatkom:

Nie sú sémantické - Tabuľku vyhľadávača chápu ako nejaký zdroj dát. Pokiaľ do nich vložíme celú stránku alebo len jej časť s obsahom, nebudú tomu pravdepodobne rozumieť, čo sa nám môže prejaviť nižšou návštevnosťou.
Nie sú responzívne - Ak stránku s tabuľkou zmenšíme, tabuľka sa nezalomí, ale zobrazí škaredý posuvník. Na mobilných zariadeniach by bol tabuľkový web takmer nepoužiteľný.

Grid systémy

Webdesigneri premýšľali nad tým, ako vytvoriť mriežku bez elementu <table>, aby sa vyhli jeho nedostatkom. Tým sa vyvinuli tzv. grid systémy. To sú predpripravené triedy, ktoré priraďujeme napr. elementom <div> a tie následne získavajú určitú šírku. Systémy obvykle fungujú tak, že rodičovský element rozdelí do 12 stĺpcov. Predtým sa na to využívala šírka zadaná v percentách, jeden stĺpec teda zaberal 8,33%. Dnes sa využíva Flexbox. Číslo 12 bolo vybrané preto, že má mnoho deliteľov. Do kontajnera tak môžeme vložiť:

Element cez celú šírku (veľkosť 12 stĺpcov)
Element cez polovicu šírky (veľkosť 6 stĺpcov)
Element cez tretinu šírky (veľkosť 4 stĺpcov)
Element cez štvrtinu šírky (veľkosť 3 stĺpcov)
Element cez 1/6 šírky (veľkosť 2 stĺpcov)
A element cez 1/12 šírky (veľkosť 1 stĺpca)

Samozrejme môžeme nastavovať aj násobky týchto hodnôt, napr. vložiť do kontajnera element, ktorý zaberie 2/3 obsahu a teda bude nastavený na šírku 8 stĺpcov a pod. Naopak nie sme schopní vložiť napr. 5 elementov vedľa seba, môžeme vložiť buď 4 alebo 6. Toto obmedzenie je daňou za estetickú pravidelnosť danou mriežkou:

Pokiaľ chceme grid systém na svojich stránkach používať, máme viac-menej dve možnosti:

použiť už spomínaný CSS framework Bootstrap (o ktorom tu na sieti máme kompletný kurz).
použiť framework Flexbox Grid od Kristofera Josepha. Tento framework nemení vzhľad našej stránky a neupravuje iné elementy, stará sa len a iba o grid systém.

V kurze si ukážeme obe možnosti a začneme s Flexbox Grid.

Flexbox Grid

Prejdeme na stránky http://flexboxgrid.com/, kde je uvedená veľmi stručná dokumentácia. Na tú sa ale pozrieme spoločne a prehľadne v ďalšej lekcii

Flexbox Grid si buď stiahnite a pridajte do svojho HTML súboru alebo použite CDN odkaz:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" />

Ukážme si rovno príklad:

<div class="row">
      <div class="col-xs-3">Quarter</div>
      <div class="col-xs-3">Quarter</div>
      <div class="col-xs-6">Half</div>
</div>

Ako prvé je nutné definovať riadok, ktorým obalíme všetky stĺpce. Ten definujeme ako <div> s triedou .row. Stĺpce sa definujú aj ako <div>, ktorému pridáme triedu .col-X-Y, kde za X a Y dosadíme:

X môže nadobúdať hodnoty od najmenšieho xs (telefóny), sm, md až lg. Týmto udávame, od akej veľkosti zariadenia začína štýl platiť. Viac si o tomto povieme v ďalšej lekcii.
Y nadobúda hodnoty 1 až 12 a udáva, koľko stĺpcov bude element zaberať. Všetky elementy v jednom riadku nemôžu zaberať dohromady viac ako 12 stĺpcov. Rovnako ako vidíme hore v príklade: 3 + 3 + 6 = 12.

Výsledok v prehliadači:

Your Page

localhost

Ukážka vyššie ešte nie je responzívna. Na to sa vrhneme ale nabudúce Ukážku som trochu naštyloval v CSS, aby bol výsledok lepšie vidieť.