Lekce 6 - Bootstrap - Grid systém Bootstrapu

V minulé lekci, Bootstrap - Úvod do grid systémů, jsme si představili grid systémy.

V dnešním tutoriálu CSS frameworku Bootstrap budeme pokračovat s gridy Bootstrapu. Jako vždy si na praktických ukázkách vyzkoušíme, co vše s nimi můžeme dělat.

Responzivní třídy

Hlavní výhodou gridu je, že se nejen zalomí v případě, že se na stránku nevejde, ale také si můžeme nastavit, kdy se má zalomit. Kromě tříd ve tvaru col-{číslo} můžeme přiřazovat i responzivní třídy jako například .col-sm-3, což konkrétně znamená, že od malých zařízení a větších bude sloupec zabírat 3/12 gridu.

Pro příklad nyní použijme třídy se specifikovaným breakpointem a sloupce definujme pouze od středně velkých viewportů dále. Cokoli menšího bude mít vždy šířku 12 sloupců, což je výchozí šířka. Na malých zařízeních se tedy sloupce poskládají pod sebe:

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

Výsledek:

Můžeme si zkusit zmenšit okno prohlížeče a podívat se na ukázku výše. Elementy se zalomí a naskládají pod sebe. Náš obsah stránky je tedy rozdělený do "tabulky" a zároveň je responzivní

Tříd můžeme přiřadit k jednomu sloupci více a tak mu "naprogramovat", jak má být široký na různých zařízeních. Můžeme přidat jakoukoli responzivní třídu k jakémukoli sloupci. Jak jsou která zařízení velká a jaké mají breakpointy zkratky jsme si definovali v lekci Bootstrap - Typografie. Pro úplnost si zmiňme, že breakpointy jdou po sobě takto:

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

Ukažme si ještě jeden příklad, a to když nakombinujeme více tříd u jednotlivých sloupců tak, aby se na různých zařízeních chovaly různým způsobem. Chování si můžeme ověřit zmenšováním okna prohlížeče:

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

Výsledek:

Od středně velkých zařízení zabírají oba sloupce polovinu kontejneru. Na menších zařízeních zabírá první <div> 1/3 a druhý 2/3 kontejneru.

Odsazení

Elementy sloupců mají kolem sebe padding, tomu se v kontextu Bootstrap grid systému říká gutter. Můžeme jej případně odstranit a to přidáním třídy .g-0 elementu se třídou .row. Sloupcům v gridu nesmíme přidávat margin, protože by elementy s ním byly dohromady širší než kontejner a zalomily by se. Nic nám ovšem nebrání vložit do sloupce další element a margin nastavit až tomuto elementu. Aby grid systém fungoval, musí být vždy všechny přímé podelementy řádků sloupce. Sloupce mohou obsahovat opět řádky, gridy tedy můžeme vkládat do sebe. Některé HTML elementy nelze jako flex kontejnery zatím použít, to jsou např. <button> nebo <fieldset>.

K flexboxu bylo nahlášeno několik bugů, zejména pro zastaralý prohlížeč Internet Explorer. Některé se ovšem týkají i moderních prohlížečů. Seznam nahlášených chyb můžeme například nalézt v repozitáři Flexbugs.

Guttery jsou implementované pomocí paddingu po obou stranách každého sloupce a negativních elementů margin na kontejneru. Díky tomu mají sloupce mezery mezi sebou, ale krajní mezeru mezi sebou a okolím kontejneru nevytvoří.

Dále máme třídy .g-, .gx- a .gy-, které nám poskytují vylepšenou kontrolu nad mezerami mezi sloupci a řádky v grid systému. Třída .g- nastavuje stejné mezery jak mezi sloupci (horizontální), tak mezi řádky (vertikální). Hodnota, kterou zapíšeme za pomlčku určuje velikost mezery a může být v rozmezí od 0 (bez mezery) do 5 (největší mezera).

Třídy .gx- a .gy- jsou specifičtější - .gx- se vztahuje pouze na horizontální mezery (mezi sloupci), zatímco .gy- určuje pouze vertikální mezery (mezi řádky). Tímto způsobem mohou designéři jemně upravit rozestupy mezi prvky gridu, a to buď uniformně pomocí .g-, nebo selektivně pro horizontální či vertikální rozestupy.

Ukažme si to na příkladu:

<div class="container-fluid">
        <!-- Příklad s globální mezerou -->
        <div class="row g-3">
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Sloupec 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 3</div>
            </div>
        </div>

        <!-- Příklad s horizontální mezerou -->
        <div class="row gx-5 my-4">
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Sloupec 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 3</div>
            </div>
        </div>

        <!-- Příklad s vertikální mezerou -->
        <div class="row gy-5">
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 1</div>
            </div>
            <div class="col-4">
                <div class="border bg-warning text-white">Sloupec 2</div>
            </div>
            <div class="col-4">
                <div class="border bg-success text-white">Sloupec 3</div>
            </div>
        </div>
</div>

V tomto příkladu třída .g-3 nastavuje mezeru 3 jak mezi sloupci, tak mezi řádky, .gx-5 nastavuje horizontální mezery mezi sloupci na velikost 5, .my-4 je utility třída pro vertikální margin (y osa), která přidává mezery nad a pod řádkem a .gy-5 nastavuje vertikální mezery mezi řádky na velikost 5.

Výsledek v prohlížeči:

Automatická šířka

Pokud nějakému sloupci nastavíme šířku pomocí třídy ve tvaru .col-{breakpoint}-auto, jeho šířka se nastaví tak, aby se do sloupce vešel jeho obsah a zbytek šířky bude rozdělen mezi zbývající sloupce podle pravidel definovaných v gridu. S automatickou šířkou souvisí i využití zbytku kontejneru. Pokud se v gridu nalézá mix sloupců se specifikovanou šířkou a sloupců označených jen třídou .col, vyplní sloupec s .col zbylé místo.

Obojí si vyzkoušejme:

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

Živá ukázka:

Kód výše zobrazí kontejner se třemi sloupci. Ten první bude zabírat vždy všechno zbylé místo, tedy co nejvíce. Ten druhý zabere co nejméně místa, jen aby se do něj vešel jeho obsah. A ten třetí zabere 4/12 šířky kontejneru. Po zmenšení na viewport pod malá zařízení se všechny sloupce seřadí pod sebe.

Automatická šířka sloupců je spíše technologická vychytávka než styl, který budete často používat. Právě šířka stanovená nikoli na základě obsahu elementu, ale na zadaném počtu sloupců, tvoří přidanou hodnotu gridu.

Vynucení zalomení řádku

Pokud bychom z nějakého důvodu potřebovali zalomit řádek dříve, než jej ve skutečnosti ukončíme, můžeme za tímto účelem do gridu vložit sloupec s třídou .w-100, který se používá k nastavení šířky elementu na 100 % rodičovského elementu:

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

Výsledek:

Všimněme si, že můžeme použít i třídu .col-sm, tedy přidat responzivní breakpoint, aniž bychom specifikovali kolik sloupců gridu má sloupec zabírat. K zalomení řádku dojde také ve chvíli, když by součet šířek jeho sloupců přesáhl 12 sloupců (např. .col-4 a .col-9).

Bootstrap nám poskytuje mimo .w-100 ještě další třídy pro šířku jako .w-25, .w-50 a .w-75 pro nastavení šířky elementu na 25 %, 50 % a 75 % rodičovského elementu.

Zarovnání a změna pořadí

Pokud bychom potřebovali sloupce v gridu nějak zarovnat, což by se teoreticky stávat příliš nemělo, platí pro sloupce kontejneru to samé jako si řekneme v lekcích Flex utilities a Flex utilities podruhé. Elementům se třídou .row tedy přiřazujeme třídy jako .align-items-center, .justify-content-center nebo .align-self-end a podobně.

Nově zavedené třídy v Bootstrap 5, jako jsou .align-items-xxl-, .justify-content-xxl- nabízí větší kontrolu nad zarovnáním a rozložením prvků na extra extra velkých obrazovkách.

Stejně tak můžeme měnit skutečné pořadí sloupců v řádku bez ohledu na jejich pořadí v kódu, stačí jim přiřadit jednu z tříd začínající na .order-{číslo}, kde číslo nabývá hodnot 1 - 12. To vše budeme používat i z výše zmíněné lekce na flex utilities. Pro kompletnost těchto materiálů si uveďme jeden příklad za všechny:

<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">
            Druhý
        </div>
        <div class="col-auto border bg-success text-white order-1 align-self-center">
            První
        </div>
        <div class="col-auto border bg-success text-white align-self-end order-3">
            Třetí
        </div>
    </div>
</div>

A živá ukázka:

Offsety

Občas nějaký sloupec nevyužijeme a chceme místo něj ponechat volné místo. Abychom se vyhnuli jeho zbytečné deklaraci v kódu, nemusíme prázdný sloupec vkládat vůbec a následující sloupec a kus posunout. Máme k tomu k dispozici třídy ve formátu .offset-{číslo}, případně .offset-{breakpoint}-číslo, přičemž číslo určuje počet sloupců (z 12), o které se má daný sloupec posunout doprava:

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

Ukázka:

Pokud bychom chtěli nastavit, aby se offset od nějakého breakpointu aplikoval a od nějakého zase ne, vypnuli bychom u druhého rozměru pomocí třídy .offset-{breakpoint}-0.

Automatické marginy

Ve zmíněných lekcích Flex utilities a Flex utilities podruhé se podíváme i na hack s automatickými marginy. Pokud některému sloupci nastavíme třídu .ms-auto nebo .me-auto, posune se zbytek sloupců nalevo, resp. napravo:

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

Ukázka:

V následujícím cvičení, Řešené úlohy k 1.-6. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.