Vlastnost grid

grid je zkratka pro definování všech vlastností CSS gridu.

V jedné deklaraci můžete nastavit jen jeden z obou možných gridů:

• explicitní, výslovně definovaný pomocí vlastností grid-template-rows, grid-template-columns a grid-template-areas
• implicitní, definovaný pomocí vlastností grid-auto-rows, grid-auto-columns a grid-auto-flow

Je to mocná zbraň, která dokáže urychlit práci zkušených mřížkových ninjů, ovšem začínajícím bych ji raději doporučoval nepoužívat.

Pojďme se podívat na několik ukázek.

Definice explicitního gridu

V tomto zápisu oddělujeme hodnoty pro vlastnosti grid-template-rows od grid-template-columns pomocí lomítka:

grid: <grid-template-rows> / <grid-template-columns>;

Například:

.container {
  grid: auto auto / 2fr 1fr;
}  

Odpovídá tomuto zápisu:

.container {
  grid-template-rows: auto auto;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: none;
}

Je to prostě úplně stejné jako u zkratky grid-template.

Implicitní grid a auto-flow

To, zda v daném směru definujete implicitní grid, se pozná podle klíčového slova auto-flow:

.container {
  grid: auto-flow 1fr / 100px 100px;
}

Zápis je ekvivalentní tomuto:

.container {
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
  grid-template-rows: none;
  grid-template-columns: 100px 100px;
  grid-template-areas: none;
}

Vysvětlíme:

• grid-auto-flow:row – grid se bude vykreslovat po řádcích. Jak můžete vědět ze studia vlastnosti grid-auto-flow, hodnota grid-auto-flow:row je v prohlížečích výchozí, takže bychom ji nemuseli nastavovat.
• grid-auto-rows:1fr – implicitní grid bude mít výšku řádků 1fr.
• grid-auto-columns:auto – implicitní grid nemá definované sloupce, takže se budou řídit šířkou obsahu buňky.
• grid-template-rows:none – buňky gridu nemají ve směru řádků nijak nastavené rozměry.
• grid-template-columns:100px 100px – buňky mají v explicitním gridu nastavenou šířku 100px a tvoří dva sloupce.

Podobné to bude u opačného zápisu:

.container {
  grid: 1fr / auto-flow 100px 100px;
}

Ten je ekvivalentní následujícímu:

.container {
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-auto-columns: 100px;
  grid-template-rows: 1fr;
  grid-template-columns: none;
  grid-template-areas: none;
}

Zahuštěné vykreslování, klíčové slovo dense

Pokud jste viděli vlastnost grid-auto-flow, určitě vás zaujala hodnota dense.

Můžeme ji nastavit i pomocí zkratky grid. Následující dva kousky kódu budou totožné:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Co je ještě dobré vědět?

• U všech zkratek v CSS platí, že vlastnosti, které nedefinujeme, zkratka nastaví na jejich výchozí hodnoty. To může být občas nebezpečné.
• Vlastnost pro mezeru mezi buňky layoutu – gap – nelze přes zkratku grid nastavit, a není tudíž jejím použitím resetována.

Podpora v prohlížečích

Zkratku grid zvládají všechny prohlížeče kromě Internet Exploreru. Pokud na projektu potřebujete zapisovat CSS grid i pro tento prohlížeč, doporučuji se zkratce grid vyhnout.

Tvůrci nástroje Autoprefixer doporučují použití samotných vlastností nebo maximálně zkratky grid-template.