8. diel - Grid systém od Flexbox Grid

V predchádzajúcej lekcii, Úvod do CSS grid systémov, sme sa naučili, aké sú možnosti grid systémov.

Keď už teraz vieme, ako grid systémy fungujú, poďme si viac dopodrobna predstaviť Flexbox Grid. V dnešnej lekcii si tento framework preberieme podrobnejšie tak, aby ste ho boli schopní bez problémov používať na svojom projekte.

Breakpointy

Pri príklade v minulej lekcii sme trochu nahryzli breakpointy v tomto frameworku. Pre úplnosť si to ešte raz zopakujme podrobnejšie.

Vo Flexbox Grid máme 4 druhy breakpointov:

• xs-Y - element bude široký Y stĺpcov na veľmi malých zariadeniach a väčších (teda na všetkých)
• sm-Y - element bude široký Y stĺpcov na malých zariadeniach a väčších
• md-Y - element bude široký Y stĺpcov na stredne veľkých zariadeniach a väčších
• lg-Y - element bude široký Y stĺpcov na veľkých zariadeniach

Ako už vieme z príkladu z minula:

<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>

Tento kód nám rozdelí stránku na 3 stĺpce. Tak stránka bude vyzerať od najmenších zariadení, až po tie najväčšie. Je to z dôvodu, že sme použili identifikátor xs. Daný breakpoint totiž vždy zahŕňa aj všetky nad ním, pokiaľ nie je určené inak.

Ako ste si sami mohli všimnúť, ukážka vyššie nie je úplne responzívna, pretože sme hodnoty pre stĺpce nastavili už od úplne najmenšieho breakpointu. Nie je teda možnosť, aby sa stĺpce samé roztiahli po celej obrazovke, pretože aj na tom najmenej širokom displeji máme vynútené 3 stĺpce. Ak by sme teraz do stĺpcov pridali viac textu, výsledok by na malých zariadeniach nebol nijako úchvatný.

Riešenie

Určite vás už asi napadlo, ako tento problém vyriešiť. Jednoducho počet stĺpcov nastavíme od širších zariadení a na tých malých prenastavíme tak, aby sa zobrazovali cez celú obrazovku (tá má 12 potenciálnych stĺpcov). Kód by vyzeral takto:

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

Môžeme rovno použiť aj nejaké to CSS, nech ukážku lepšie pochopíme:

.text-center {
  text-align: center;
}

.background-primary {
  background-color: red;
}

.background-secondary {
  background-color: green;
}

Výsledok:

Stĺpčeky sa nám na zariadení typu xs a sm roztiahnu po celej šírke (12 stĺpcov), zatiaľ čo od md (teda aj lg – pretože nie je definované inak) sa utvoria do stĺpcov v pomere 3/3/6.

Toto bola len malá ukážka toho, ako môžeme jednoducho upravovať veľkosť stĺpca na zariadeniach, vždy môžete pridať až 4 možnosti stĺpcovania.

Dôležité

Pri používaní Flexbox Grid by sme nemali používať margin. Stĺpce majú totiž presne definovanú šírku a pokiaľ ju narušíme vlastností margin, celková šírka nám môže pretiecť:

Vlastnosť margin preto používať nebudeme. Namiesto toho môžeme nejako vhodne použiť padding alebo do stĺpca vložiť ďalší element a tomu potom margin nastaviť, a pod. Riešenie je veľa

Automatická šírka

Pokiaľ budeme používať automatickú šírku na stĺpikoch, problém vyššie riešiť nemusíme. Tá sa definuje tak, že jednoducho za .col-X už nenapíšeme žiadne číslo. Pokiaľ majú všetky elementy v .row nastavenú automatickú šírku, potom sú stĺpce všetky rovnaké a je jedno, koľko v nich máme obsahu. Predstavme si nasledujúci kód:

<div class="row text-white">
    <div class="col-xs background-primary">Short text</div>
    <div class="col-xs background-secondary">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
        placerat. Nunc tincidunt ante vitae massa. Mauris dolor felis, sagittis
        at, luctus sed, aliquam non, tellus. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Vivamus porttitor turpis ac leo. Aliquam erat volutpat.
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Aliquam ante. Proin pede metus, vulputate nec,
        fermentum fringilla, vehicula vitae, justo. Nemo enim ipsam voluptatem
        quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos qui ratione voluptatem sequi nesciunt. Cras pede
        libero, dapibus nec, pretium sit amet, tempor quis.
    </div>
</div>

Kód nám vygeneruje nasledujúcu stránku:

Ak teraz jednému zo stĺpcov nastavíme margin, tak stĺpce majú stále dohromady šírku 100 %. Avšak aj napriek tomu by som to neodporúčal.

Čo sa ale stane, ak medzi stĺpce s automatickou šírkou pridáme stĺpec s pevnou šírkou? Jednoducho stĺpec s automatickou šírkou vyplní zvyšok riadku. Pokiaľ je stĺpcov s automatickou šírkou viac, vyplní zvyšok riadku rovnomerne:

<div class="row text-center text-white">
    <div class="col-xs-6 background-primary">Fixed width 1/2</div>
    <div class="col-xs background-secondary">Automatic</div>
    <div class="col-xs background-secondary">Automatic</div>
    <div class="col-xs background-secondary">Automatic</div>
</div>

K HTML pridáme ešte CSS:

.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

.background-primary {
  background-color: red;
}

.background-secondary {
  background-color: green;
}

Výsledok vyzerá takto:

Zmena poradia

Ďalšia vec, čo nám Flexbox Grid umožňuje, je meniť poradie elementov. Oproti Bootstrapu, kde ide určiť presné miesto elementu, nám Flexbox Grid dovoľuje určiť iba prvý a posledný element. Používame na to triedy .first-X a .last-X na elemente, kde X určuje jeden z breakpointov. Ukážka:

<div class="row text-white text-center">
    <div class="col-xs last-xs background-primary">First</div>
    <div class="col-xs background-secondary">Second</div>
    <div class="col-xs first-xs background-primary">Third</div>
    <div class="col-xs background-secondary">Fourth</div>
</div>

HTML kód vyššie nám vygeneruje nasledujúcu stránku:

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 o kus posunúť. Máme k tomu k dispozícii triedu vo formáte .col-X-offset-Y, pričom Y je číslo, ktoré definuje počet stĺpcov (Y z 12), o ktoré sa má daný stĺpec posunúť doprava. X je hodnota breakpointu. Ukážka:

<div class="row text-white text-center">
    <div class="col-xs-3 background-primary">First</div>
    <div class="col-xs-3 col-xs-offset-3 background-secondary">Third</div>
    <div class="col-xs-3 background-primary">Fourth</div>
</div>

Kód nám vygeneruje nasledujúcu stránku:

Pozíciovanie

Flexbox Grid, ako už je vlastne z názvu frameworku spoznať, vychádza z Flexbox rozloženia. Preto využíva niektoré vlastnosti Flexboxu. Tým je napr. pozíciovanie elementov vo voľnom mieste. Môžeme buď pozicovať horizontálne, vertikálne alebo podľa preddefinovaných štýlov. Hlavným rozdielom je, že nasledujúce triedy sa píšu na riadok (.row), nie na stĺpec. Definujú totiž správanie celého riadku

Horizontálne pozíciovanie

Začnime ukážkou horizontálneho pozíciovania. Používajú sa na to triedy .start-X, .center-X, .end-X, kde je X breakpoint. Tieto triedy nám určujú, odkiaľ sa budú elementy pozíciovať. Či od začiatku, zo stredu alebo z konca. Ukážka:

<div class="row start-xs">
    <div class="col-xs-6">Start</div>
</div>
<div class="row center-xs">
    <div class="col-xs-6">Center</div>
</div>
<div class="row end-xs">
    <div class="col-xs-6">End</div>
</div>

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
}

.col-xs-6 {
  background-color: rgb(10, 32, 153);
  color: white;
}

Výsledok v prehliadači:

Každý ďalší vložený stĺpec by sa potom napozicoval na rovnakú stranu.

Vertikálne pozíciovanie

Vertikálne pozíciovanie nám zaisťujú triedy .top-X, .middle-X a .bottom-X, kde X opäť určuje breakpoint. Opäť ich priradíme na riadok:

<div class="row top-xs">
    <div class="col-xs-12">Top</div>
</div>
<div class="row middle-xs">
    <div class="col-xs-12">Middle</div>
</div>
<div class="row bottom-xs">
    <div class="col-xs-12">Bottom</div>
</div>

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
  height: 100px;
}

.col-xs-12 {
  background-color: rgb(10, 32, 153);
  color: white;
}

Výsledok v prehliadači:

Ostatné stĺpce by sa samozrejme vkladali na rovnakú časť riadku.

Preddefinované pozíciovanie

Dnes sa pozrieme už na poslednú ukážku. Ide o preddefinované formy, ako sa stĺpce budú pozíciovať v riadku. Obe samozrejme vychádzajú z Flexboxu, takže ak ho poznáte, určite vám budú povedomé triedy .around-X a .between-X (X zase určuje breakpoint). Tu toho nie je veľmi čo vysvetľovať, poďme si rovno ukázať, ako vyzerajú:

<div class="row around-xs">
    <div class="col-xs-2">around</div>
    <div class="col-xs-2">around</div>
    <div class="col-xs-2">around</div>
</div>
<div class="row between-xs">
    <div class="col-xs-2">between</div>
    <div class="col-xs-2">between</div>
    <div class="col-xs-2">between</div>
</div>

Triedy opäť píšeme na riadok (.row). Definujeme tým totiž štýl pre celý riadok, nie len určitý stĺpec!

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
}

.col-xs-2 {
  background-color: rgb(10, 32, 153);
  color: white;
}

V prehliadači sa zobrazí:

Ako môžeme vidieť, tieto preddefinované štýly používajú interne triedu .middle a potom trochu rozdielne pracujú s miestom okolo seba.

To by bolo pre túto lekciu všetko, dúfam, že sa vám Flexbox Grid páči a budete ho využívať aj na svojom projekte

V budúcej lekcii, CSS grid - Princípy a layout, si predstavíme CSS grid systém a akým spôsobom ho môžeme využiť na tvorbu layoutu webu.