02 Grid

Základní definice řádku je class div.grid
Základní definice sloupce je class div.grid__cell
Základní definice šířky sloupce je class .size--l--1-12. Kdy l je definice breakpointu (l - desktop, m - tablet, s - mobil landscape, xs - mobil portrait) a následující dvojčíslí je zlomek (v příkladu je to 1/12).
Od šířky 1200px je mezera mezi sloupci 30px oproti standardní 20px.
Desktop má dvanáctisloupcový grid. Prefix L (size--l--*, push--l--*, pull--l--*). Tento grid se používá od šířky 1024px.
Speciální případ je pětisloupcový grid, který porušuje standardní dělení do dvanácti základních sloupečků. Třída pro jeden sloupec je v tomto případě .size--l--2.4-12. Tuto šířku nelze kombinovat s jinými variantami, grid by se v takovém případě rozpadl.

Tablet má čtvrtinový grid. Prefix M (size--m--*, push--m--*, pull--m--*). Tento grid se používá od šířky 700px. Existují dva gridy - 12 sloupcový, který funguje stejně jako výše a 4 sloupcový, pro který je připravena ukázka.

Mobil landscape má polovinový grid. Prefix S (size--s--*, push--s--*, pull--s--*). Tento grid se používá od šířky 480px.

Pro tento grid se používají pouze poloviny.

Mobil portrait má polovinový grid. Prefix xs (size--xs--*, push--xs--*, pull--xs--*). Tento grid se používá od šířky 0px.

Pro tento grid se používají pouze poloviny.

K přesouvání sloupců slouží classy .push--*--* a .pull--*--*. První hvězdička je definice breakpointu (l - desktop, m - tablet, s - mobil landscape, xs - mobil portrait) a následující hvězdička je zlomek šírky gridu (1/12, 1/4, 1/2).

Standradní zarovnání je nahoru. Další možností je zarovnání na střed (.grid--middle) nebo spodní okraj (.grid--bottom) - tyto třídy se vkládají na .grid.

Standradní zarovnání je doleva. Další možností je zarovnání na střed (.grid--center) nebo doprava (.grid--right) - tyto třídy se vkládají na .grid.

K resetu mezer mezi sloupci slouží modifikátor .grid--nogutter, který se přidává na .grid

Ke zvětšení mezer slouží modifikátor .grid--lg, který se přidává na .grid

Ke zvětšení mezer slouží modifikátor .grid--xl, který se přidává na .grid

Ke zmenšení slouží modifikátor .grid--sm, který se přidává na .grid

Přidáním .size--auto na .grid__cell se velikost buňky uzpůsobí velikosti obsahu.