Lekce 8 - Grid systém od Flexbox Grid

V předchozí lekci, Úvod do CSS grid systémů, jsme se naučili, jaké jsou možnosti grid systémů.

V tomto tutoriálu responzivního webdesignu navážeme na předchozí znalosti o grid systémech a základním použití Flexbox Gridu a zaměříme se na responzivní chování gridu, konkrétně na práci s breakpointy.

Breakpointy

U příkladu v minulé lekci jsme trochu nakousli breakpointy v tomto frameworku. Pro úplnost si to ještě jednou zopakujme podrobněji. Ve Flexbox Gridu máme 4 druhy breakpointů:

• .col-xs-Y - element bude široký Y sloupců na velmi malých zařízeních a větších (tedy na všech),
• .col-sm-Y - element bude široký Y sloupců na malých zařízeních a větších,
• .col-md-Y - element bude široký Y sloupců na středně velkých zařízeních a větších,
• .col-lg-Y - element bude široký Y sloupců na velkých zařízeních.

Jak už víme z příkladu z minula, kód níže nám rozdělí stránku na 3 sloupce. Takto bude stránka vypadat od nejmenších zařízení až po ta největší. Je to proto, že jsme použili identifikátor xs. Daný breakpoint totiž vždy zahrnuje i všechny větší breakpointy, pokud není určeno jinak:

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

Jak jste si mohli všimnout, ukázka výše není dostatečně responzivní, protože jsme šířky sloupců nastavili už od nejmenšího breakpointu. Sloupce se proto nemohou samy roztáhnout přes celou šířku displeje. Na úzkých obrazovkách také vynucujeme tři sloupce. Pokud bychom do sloupců přidali více textu, výsledek by na malých zařízeních nebyl příliš čitelný.

Řešení

Možná už vás napadlo, jak tento problém vyřešit. Šířky sloupců nastavíme až od širších zařízení a na malých zařízeních je necháme zobrazit přes celou šířku (tj. 12 z 12 sloupců). Kód by vypadal takto:

<div class="row text-center text-white">
    <div class="col-xs-12 col-md-3 background-primary">Čtvrtina</div>
    <div class="col-xs-12 col-md-3 background-primary">Čtvrtina</div>
    <div class="col-xs-12 col-md-6 background-secondary">Polovina</div>
</div>

Můžeme rovnou použít i CSS, ať ukázku lépe pochopíme:

body {
  font-family: sans-serif;
}

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

.text-white {
  color: white;
}

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

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

Výsledek:

Sloupce se nám na zařízeních typu xs a sm roztáhnou po celé šířce (12 sloupců), zatímco od md (tedy i lg, protože není definováno jinak) se rozloží v poměru 3/3/6.

Toto byla jen malá ukázka toho, jak můžeme jednoduše upravovat velikost sloupce na různých zařízeních. Pro každý sloupec můžete definovat až čtyři varianty (xs/sm/md/lg).

Důležité

Při používání Flexbox Gridu se obecně vyhněte použití margin přímo na sloupcích (.col-*), zejména horizontálnímu margin. Sloupce mají přesně definovanou šířku a pokud ji narušíme vlastností margin, celková šířka řádku může přetéct:

Vlastnost margin proto na sloupcích používat nebudeme. Místo toho můžeme vhodně použít padding nebo do sloupce vložit další (vnitřní) element a margin nastavit až na něj. Možností je více.

Automatická šířka

Pokud budeme používat automatickou šířku na sloupcích, problém výše řešit nemusíme. Ta se definuje tak, že použijeme třídu ve tvaru .col-xs / .col-sm / .col-md / .col-lg bez čísla. Pokud mají všechny elementy v .row nastavenou automatickou šířku, pak jsou sloupce všechny stejné a je jedno, kolik v nich máme obsahu. Představme si následující kód:

<div class="row text-white">
      <div class="col-xs background-primary">Krátký 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 následující stránku:

Pokud nyní jednomu ze sloupců nastavíme margin, rozvržení může stále působit použitelně, ale margin může i v tomto případě způsobit přetečení nebo zalomení řádku. Proto jej ani zde nedoporučujeme.

Co se ale stane, pokud mezi sloupce s automatickou šířkou přidáme sloupec s pevnou šířkou? Jednoduše sloupec s automatickou šířkou vyplní zbytek řádku. Pokud je sloupců s automatickou šířkou více, vyplní zbytek řádku rovnoměrně:

<div class="row text-center text-white">
      <div class="col-xs-6 background-primary">Pevná šířka 1/2</div>
      <div class="col-xs background-secondary">Automat</div>
      <div class="col-xs background-secondary">Automat</div>
      <div class="col-xs background-secondary">Automat</div>
</div>

K HTML přidáme ještě CSS:

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

.text-white {
  color: white;
}

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

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

Třídy text-center, text-white a background-* nejsou součástí Flexbox Gridu. Slouží pouze k vizuálnímu zvýraznění ukázek a definujeme si je v našem vlastním CSS.

Výsledek vypadá takto:

Změna pořadí

Další věc, kterou nám Flexbox Grid umožňuje, je měnit pořadí elementů. Oproti Bootstrapu, kde lze určit přesné místo elementu, nám Flexbox Grid dovoluje určit pouze první a poslední element. Používáme k tomu třídy .first-X a .last-X na elementu, kde X určuje jeden z breakpointů. Ukázka:

<div class="row text-white text-center">
      <div class="col-xs last-xs background-primary">První</div>
      <div class="col-xs background-secondary">Druhý</div>
      <div class="col-xs first-xs background-primary">Třetí</div>
      <div class="col-xs background-secondary">Čtvrtý</div>
</div>

Třída first-xs přesune daný element na začátek řádku, zatímco last-xs jej přesune na konec řádku, a to pouze pro daný breakpoint. Ostatní elementy zůstanou ve stejném pořadí, v jakém jsou zapsány v HTML.

HTML kód výše nám vygeneruje následující stránku:

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 o kus posunout. Máme k tomu k dispozici třídu ve formátu .col-X-offset-Y, přičemž Y je číslo, které definuje počet sloupců (Y z 12), o které se má daný sloupec posunout doprava. X je hodnota breakpointu. Ukázka:

<div class="row text-white text-center">
      <div class="col-xs-3 background-primary">První</div>
      <div class="col-xs-3 col-xs-offset-3 background-secondary">Třetí</div>
      <div class="col-xs-3 background-primary">Čtvrtý</div>
</div>

Třída col-xs-offset-3 způsobí, že se daný sloupec posune doprava o tři gridové sloupce, jako by před ním byly tři prázdné sloupce.

Kód nám vygeneruje následující stránku:

Pozicování

Flexbox Grid, jak už je vlastně z názvu frameworku poznat, vychází z Flexbox rozložení. Proto využívá některé vlastnosti Flexboxu. Tím je např. pozicování elementů ve volném místě. Můžeme buďto pozicovat horizontálně, vertikálně a nebo podle předdefinovaných stylů.

Hlavním rozdílem je, že následující třídy se píší na řádek (.row), ne na sloupec. Definují totiž chování celého řádku.

Tyto třídy jsou zjednodušeným zápisem Flexbox vlastností. Pro horizontální zarovnání a distribuci volného místa využívají justify-content. Pro vertikální zarovnání využívají align-items.

Horizontální pozicování

Začněme ukázkou horizontálního pozicování. Používají se k tomu třídy .start-X, .center-X, .end-X, kde X je breakpoint. Tyto třídy určují, odkud se budou elementy pozicovat – zda od začátku, ze středu, nebo z konce.

Ve skutečnosti jde o zjednodušený zápis Flexbox vlastnosti justify-content, kde start, center a end odpovídají hodnotám flex-start, center a flex-end. Ukázka:

<div class="row start-xs">
      <div class="col-xs-6">Začátek</div>
</div>
<div class="row center-xs">
      <div class="col-xs-6">Střed</div>
</div>
<div class="row end-xs">
      <div class="col-xs-6">Konec</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ýsledek v prohlížeči:

Každý další vložený sloupec by se poté napozicoval na stejnou stranu.

Vertikální pozicování

Vertikální pozicování nám zajišťují třídy .top-X, .middle-X a .bottom-X, kde X opět určuje breakpoint. Stejně jako předtím je přiřadíme na řádek:

<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ýsledek v prohlížeči:

Ostatní sloupce by se samozřejmě vkládaly na stejnou část řádku.

Předdefinované pozicování

Dnes se podíváme na poslední ukázku – předdefinované způsoby pozicování sloupců v rámci řádku. Tyto třídy vycházejí přímo z Flexboxu a pracují s rozdělováním volného místa mezi jednotlivé sloupce.

Používají se třídy .around-X a .between-X, kde X určuje breakpoint. Stejně jako v předchozích případech je zapisujeme na řádek (.row), protože ovlivňují chování celého řádku.

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

Třída around-X rozděluje volné místo rovnoměrně kolem každého sloupce, zatímco between-X rozloží sloupce tak, aby byl prostor pouze mezi nimi a na okrajích řádku žádný nezůstával.

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 prohlížeči se zobrazí:

Jak můžeme vidět, tyto předdefinované styly pracují s rozdělováním volného místa v řádku a interně využívají vlastnost justify-content s hodnotami space-around a space-between.

V příští lekci, CSS grid - Principy a layout, si představíme CSS grid systém a jakým způsobem jej můžeme využít k tvorbě layoutu webu.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.