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

Když už nyní víme, jak grid systémy fungují, pojďme si více dopodrobna představit Flexbox Grid. V dnešní lekci si tento framework probereme podrobněji tak, abyste ho byli schopni bez problému používat na svém projektu.

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 Grid máme 4 druhy breakpointů:

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

Jak už víme z příkladu z minula, tento kód:

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

nám rozdělí stránku na 3 sloupce. Tak stránka bude vypadat od nejmenších zařízeních, až po ty největší. Je to z důvodu, že jsme použili identifikátor xs. Daný breakpoint totiž vždy zahrnuje i všechna nad ním, pokud není určeno jinak.

Jak jste si sami mohli všimnout, ukázka výše není úplně responzivní, protože jsme hodnoty pro sloupce nastavili již od úplně nejmenšího breakpointu. Není tedy možnost, aby se sloupce samy roztáhly po celé obrazovce, protože i na tom nejméně širokém displeji máme vynucené 3 sloupce. Pokud bychom nyní do sloupců přidali více textu, výsledek by na malých zařízeních nebyl nikterak úchvatný.

Řešení

Určitě vás už asi napadlo, jak tento problém vyřešit. Jednoduše počet sloupců nastavíme od širších zařízení a na těch malých přenastavíme tak, aby se zobrazovaly přes celou obrazovku (ta má 12 potenciálních sloupců). Kód by vypadal takto:

<div class="row">
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-6">Polovina</div>
</div>

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

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

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

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

Výsledek:

Sloupečky se nám na zařízení 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 utvoří do sloupců v poměru 3/3/6.

Toto byla jen malá ukázka toho, jak můžeme jednoduše upravovat velikost sloupce na zařízeních, vždy můžete přidat až 4 možnosti sloupcování.

Důležité

Při používání Flexbox Grid bychom neměli používat margin. Sloupce mají totiž přesně definovanou šířku a pokud ji narušíme vlastností margin, celková šířka nám může přetéct:

Vlastnost margin proto používat nebudeme. Místo toho můžeme nějak vhodně použít padding nebo do sloupce vložit další element a tomu pak margin nastavit, apod. Řešení je spousta

Automatická šířka

Pokud budeme používat automatickou šířku na sloupcích, problém výše řešit nemusíme. Ta se definuje tak, že jednoduše za .col-X už nenapíšeme žádné číslo. 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, tak sloupce mají stále dohromady šířku 100%. Nicméně i přesto bych to nedoporučoval.

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

Výsledek vypadá takto:

Změna pořadí

Další věc, co nám Flexbox Grid umožňuje, je měnit pořadí elementů. Oproti Bootstrapu, kde jde 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>

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>

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), né na sloupec. Definují totiž chování celého řádku

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 je X breakpoint. Tyto třídy nám určují, odkud se budou elementy pozicovat. Zda od začátku, ze středu nebo z konce. 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. Opět 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 už na poslední ukázku. Jde o předdefinované formy, jak se sloupce budou pozicovat v řádku. Obě samozřejmě vychází z Flexbox, takže pokud jej znáte, určitě vám budou povědomé třídy .around-X a .between-X (X zase určuje breakpoint). Zde toho není moc co vysvětlovat, pojďme si rovnou ukázat, jak vypadají. (Třídy opět píšeme na řádek (.row) - definujeme tím totiž styl pro celý řádek, ne jen určitý sloupec!):

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

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 používají interně třídu .middle a poté trochu rozdílně pracují s místem okolo sebe.

To by bylo pro tuto lekci vše, doufám, že se vám Flexbox Grid líbí a budete ho využívat i na svém projektu

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.