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

V minulej lekcii, Responzívne obrázky - Resolution switching a Art REDIRECTION , sme si ukázali niekoľko spôsobov, ako prispôsobiť obrázky na našom webe.

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ši.

Úvod do grid systémov

Na začiatok by sa patrilo 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ácie oveľa lepšie spracovateľná. Pozrime sa na layout populárne šablóny Gantella od frameworku Bootstrap pre administráciu webu:

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

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

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

Tabuľky

V dobách už dávno minulých sa pre 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. Nasledovne:

<table>
    <tr>
        <td colspan="2"><h1>Hlavička</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Obsah...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Patička</small></td>
    </tr>
</table>

Výsledok v prehliadači:

Tabuľky sa pre pozicovanie prvkov na stránke už nepoužívajú kvôli 2 vážne nedostatky:

• Nie sú sémantickej - Tabulku vyhľadávače chápu ako nejaký zdroj údajov. 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žšia 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

Webdesignéri 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 zvyčajne fungujú tak, že rodičovský element rozdelí do 12 stĺpcov. Skôr sa k tomu 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ĺpce)

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ť danú mriežkou:

Ak chceme grid systém na svojich stránkach používať, máme viacmenej 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 Kristofer Josepha. Tento framework nemení vzhľad našej stránky a neupravuje iné elementy, stará sa len a len 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ácie. 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">Čtvrtina</div>
      <div class="col-xs-3">Čtvrtina</div>
      <div class="col-xs-6">Polovina</div>
</div>

Ako prvý je nutné definovať riadok, ktorým obalíme všetky stĺpce. Ten definujeme ako <div> sa triedou .row. Stĺpce sa definujú aj ako <div>, ktorému pridáme triedu .col-XY, 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:

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

V ďalšej lekcii, Grid systém od Flexbox Grid , si rozšírime znalosti ohľadom grid systému od flexboxgrid.com.