6. diel - Bootstrap - Grid systém Bootstrapu

V minulej lekcii, Bootstrap - Úvod do grid systémov, sme si predstavili grid systémy.

V dnešnom tutoriáli CSS frameworku Bootstrap budeme pokračovať s gridmi Bootstrapu. Ako vždy si na praktických ukážkach vyskúšame, čo všetko s nimi môžeme robiť.

Responzívne triedy

Hlavnou výhodou gridu je, že sa nielen zalomí v prípade, že sa na stránku nezmestí, ale tiež si môžeme nastaviť, kedy sa má zalomiť. Okrem tried v tvare col-{number} môžeme priraďovať aj responzívne triedy ako napríklad .col-sm-3, čo konkrétne znamená, že od malých zariadení a väčších bude stĺpec zaberať 3/12 gridu.

Pre príklad teraz použijeme triedy so špecifikovaným breakpointom a stĺpce definujme iba od stredne veľkých viewportov ďalej. Čokoľvek menšieho bude mať vždy šírku 12 stĺpcov, čo je predvolená šírka. Na malých zariadeniach sa teda stĺpce poskladajú pod seba:

<div class="container-fluid bg-light">
    <div class="row">
        <div class="col-sm-3 border bg-success text-white">
            Quater
        </div>
        <div class="col-sm-3 border bg-success text-white">
            Quater
        </div>
        <div class="col-sm-6 border bg-warning">
            Half
        </div>
    </div>
</div>

Výsledok:

Môžeme si skúsiť zmenšiť okno prehliadača a pozrieť sa na ukážku vyššie. Elementy sa zalomia a naskladajú pod seba. Náš obsah stránky je teda rozdelený do "tabuľky" a zároveň je responzívny

Tried môžeme priradiť k jednému stĺpcu viac a tak mu „naprogramovať“, aký má byť široký na rôznych zariadeniach. Môžeme pridať akúkoľvek responzívnu triedu k akémukoľvek stĺpcu. Aké sú ktoré zariadenia veľké a aké majú breakpointy skratky sme si definovali v lekcii Bootstrap - Typografie. Pre úplnosť si spomeňme, že breakpointy idú po sebe takto:

• sm,
• md,
• lg,
• xl,
• xxl.

Ukážme si ešte jeden príklad, a to keď nakombinujeme viac tried pri jednotlivých stĺpcoch tak, aby sa na rôznych zariadeniach správali rôznym spôsobom. Správanie si môžeme overiť zmenšovaním okna prehliadača:

<div class="row">
    <div class="col-4 col-md-6 border bg-success text-white">Column 1</div>
    <div class="col-8 col-md-6 border bg-success text-white">Column 2</div>
</div>

Výsledok:

Od stredne veľkých zariadení zaberajú oba stĺpce polovicu kontajnera. Na menších zariadeniach zaberá prvý <div> 1/3 a druhý 2/3 kontajnera.

Odsadenie

Elementy stĺpcov majú okolo seba padding, tomu sa v kontexte Bootstrap grid systému hovorí gutter. Môžeme ho prípadne odstrániť a to pridaním triedy .g-0 elementu s triedou .row. Stĺpcom v gride nesmieme pridávať margin, pretože by elementy s ním boli dohromady širšie ako kontajner a zalomili by sa. Nič nám však nebráni vložiť do stĺpca ďalší element a margin nastaviť až tomuto elementu. Aby grid systém fungoval, musia byť vždy všetky priame podelementy riadkov stĺpca. Stĺpce môžu obsahovať opäť riadky, gridy teda môžeme vkladať do seba. Niektoré HTML elementy nemožno ako flex kontajnery zatiaľ použiť, to sú napr. <button> alebo <fieldset>.

K flexboxu bolo nahlásených niekoľko bugov, najmä pre zastaraný prehliadač Internet Explorer. Niektoré sa však týkajú aj moderných prehliadačov. Zoznam nahlásených chýb môžeme napríklad nájsť v repozitári Flexbugs.

Guttery sú implementované pomocou paddingu po oboch stranách každého stĺpca a negatívnych elementov margin na kontajneri. Vďaka tomu majú stĺpce medzery medzi sebou, ale krajnú medzeru medzi sebou a okolím kontajnera nevytvoria.

Ďalej máme triedy .g-, .gx- a .gy-, ktoré nám poskytujú vylepšenú kontrolu nad medzerami medzi stĺpcami a riadkami v grid systéme. Trieda .g- nastavuje rovnaké medzery ako medzi stĺpcami (horizontálne), tak medzi riadkami (vertikálne). Hodnota, ktorú zapíšeme za pomlčku určuje veľkosť medzery a môže byť v rozmedzí od 0 (bez medzery) do 5 (najväčšia medzera).

Triedy .gx- a .gy- sú špecifickejšie - .gx- sa vzťahuje iba na horizontálne medzery (medzi stĺpcami), zatiaľ čo .gy- určuje iba vertikálne medzery (medzi riadkami). Týmto spôsobom môžu dizajnéri jemne upraviť rozostupy medzi prvkami gridu, a to buď uniformne pomocou .g-, alebo selektívne pre horizontálne či vertikálne rozostupy.

Ukážme si to na príklade:

<div class="container-fluid">
        <!-- Global gap example -->
        <div class="row g-3">
            <div class="col-4">
                <div class="border bg-success text-white">Column 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Column 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Column 3</div>
            </div>
        </div>

        <!-- Horizontal gap example -->
        <div class="row gx-5 my-4">
            <div class="col-4">
                <div class="border bg-success text-white">Column 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Column 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Column 3</div>
            </div>
        </div>

        <!-- Vertical gap example -->
        <div class="row gy-5">
            <div class="col-4">
                <div class="border bg-success text-white">Column 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Column 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Column 3</div>
            </div>
        </div>
</div>

V tomto príklade trieda .g-3 nastavuje medzeru 3 ako medzi stĺpcami, tak medzi riadkami, .gx-5 nastavuje horizontálne medzery medzi stĺpcami na veľkosť 5, .my-4 je utility trieda pre vertikálny margin (y os), ktorá pridáva medzery nad a pod riadkom a .gy-5 nastavuje vertikálne medzery medzi riadkami na veľkosť 5.

Výsledok v prehliadači:

Automatická šírka

Pokiaľ nejakému stĺpcu nastavíme šírku pomocou triedy v tvare .col-{breakpoint}-auto, jeho šírka sa nastaví tak, aby sa do stĺpca vošiel jeho obsah a zvyšok šírky bude rozdelený medzi zostávajúce stĺpce podľa pravidiel definovaných v gride. S automatickou šírkou súvisí aj využitie zvyšku kontajnera. Pokiaľ sa v gride nachádza mix stĺpcov so špecifikovanou šírkou a stĺpcov označených len triedou .col, vyplní stĺpec s .col zvyšné miesto.

Oboje si vyskúšajme:

<div class="container-fluid">
    <div class="row">
        <div class="col border bg-success text-white">
            Column 1
        </div>
        <div class="col-sm-auto border bg-warning">
            Column 2
        </div>
        <div class="col col-sm-4 border bg-success text-white">
            Column 3
        </div>
    </div>
</div>

Živá ukážka:

Kód vyššie zobrazí kontajner s tromi stĺpcami. Ten prvý bude zaberať vždy všetko zvyšné miesto, teda čo najviac. Ten druhý zaberie čo najmenej miesta, len aby sa doňho vošiel jeho obsah. A ten tretí zaberie 4/12 šírky kontajnera. Po zmenšení na viewport pod malé zariadenia sa všetky stĺpce zoradia pod seba.

Automatická šírka stĺpcov je skôr technologická vychytávka než štýl, ktorý budete často používať. Práve šírka stanovená nie na základe obsahu elementu, ale na zadanom počte stĺpcov, tvorí pridanú hodnotu gridu.

Vynútenie zalomenia riadku

Ak by sme z nejakého dôvodu potrebovali zalomiť riadok skôr, ako ho v skutočnosti ukončíme, môžeme na tento účel do gridu vložiť stĺpec s triedou .w-100, ktorý sa používa na nastavenie šírky elementu na 100 % rodičovského elementu:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm border bg-success text-white">
            Column 1
        </div>
        <div class="col-sm border bg-success text-white">
            Column 2
        </div>
        <div class="w-100"></div>
        <div class="col-sm border bg-success text-white">
            Column 3
        </div>
    </div>
</div>

Výsledok:

Všimnime si, že môžeme použiť aj triedu .col-sm, teda pridať responzívny breakpoint bez toho, aby sme špecifikovali koľko stĺpcov gridu má stĺpec zaberať. K zalomeniu riadku dôjde aj vo chvíli, keď by súčet šírok jeho stĺpcov presiahol 12 stĺpcov (napr. .col-4 a .col-9).

Bootstrap nám poskytuje okrem .w-100 ešte ďalšie triedy pre šírku ako .w-25, .w-50 a .w-75 na nastavenie šírky elementu na 25 %, 50 % a 75 % rodičovského elementu.

Zarovnanie a zmena poradia

Ak by sme potrebovali stĺpce v gride nejako zarovnať, čo by sa teoreticky stávať príliš nemalo, platí pre stĺpce kontajnera to isté ako si povieme v lekciách Flex utilities a Flex utilities druhýkrát. Elementom s triedou .row teda priraďujeme triedy ako .align-items-center, .justify-content-center alebo .align-self-end a podobne.

Novo zavedené triedy v Bootstrap 5, ako sú .align-items-xxl-, .justify-content-xxl- ponúkajú väčšiu kontrolu nad zarovnaním a rozložením prvkov na extra extra veľkých obrazovkách.

Rovnako tak môžeme meniť skutočné poradie stĺpcov v riadku bez ohľadu na ich poradie v kóde, stačí im priradiť jednu z tried začínajúcu na .order-{number}, kde číslo nadobúda hodnoty 1 - 12. To všetko budeme používať aj z vyššie spomínanej lekcie na flex utilities. Pre kompletnosť týchto materiálov si uveďme jeden príklad za všetky:

<div class="container-fluid">
    <div class="row justify-content-center bg-light" style="height: 150px;">
        <div class="col-auto border bg-success text-white order-2 align-self-start">
            Second
        </div>
        <div class="col-auto border bg-success text-white order-1 align-self-center">
            First
        </div>
        <div class="col-auto border bg-success text-white align-self-end order-3">
            Third
        </div>
    </div>
</div>

A živá ukážka:

Offsety

Občas nejaký stĺpec nevyužijeme a chceme namiesto neho ponechať voľné miesto. Aby sme sa vyhli jeho zbytočnej deklarácii v kóde, nemusíme prázdny stĺpec vkladať vôbec a nasledujúci stĺpec a kus posunúť. Máme k tomu k dispozícii triedy vo formáte .offset-{number}, prípadne .offset-{breakpoint}-{number}, pričom číslo určuje počet stĺpcov (z 12), o ktoré sa má daný stĺpec posunúť doprava:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 bg-success text-white">
            Column 1
        </div>
        <div class="col-md-4 offset-md-4 bg-success text-white">
            Column 2
        </div>
    </div>
</div>

Ukážka:

Ak by sme chceli nastaviť, aby sa offset od nejakého breakpointu aplikoval a od nejakého zase nie, vypli by sme pri druhom rozmere pomocou triedy .offset-{breakpoint}-0.

Automatické marginy

V spomínaných lekciách Flex utilities a Flex utilities druhýkrát sa pozrieme aj na hack s automatickými marginmi. Pokiaľ niektorému stĺpcu nastavíme triedu .ms-auto alebo .me-auto, posunie sa zvyšok stĺpcov naľavo, resp. napravo:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 border bg-success text-white">
            Column 1
        </div>
        <div class="col-md-2 border bg-success text-white">
            Column 2
        </div>
        <div class="col-md-2 border bg-success text-white ms-auto">
            Column 3
        </div>
    </div>
</div>

Ukážka:

V nasledujúcom cvičení, Riešené úlohy k 1.-6. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.