Martin Michálek Martin Michálek  – 2. 8. 2019

Vlastnosti grid-auto-rowsgrid-auto-columns použijete pro tvorbu implicitního, tedy výslovně nedefinovaného gridu v CSS.

Vlastnost grid-auto-rows a grid-auto-columns

Vlastnosti grid-auto-rowsgrid-auto-columns jsou součástí CSS gridu.

Jsou tedy doplňkem vlastností grid-template-rowsgrid-template-columns, které naopak slouží pro vytváření gridu explicitního, tedy autorsky definovaného.

Tyto vlastnosti jsou užitečné pro implicitní řádky (grid-auto-rows), a to v případech, kdy máte v HTML neznámý počet položek. Řádky se vám v layoutu tvoří samy a vy nemusíte definovat mřížku pro různé počty položek v ní.

Možné hodnoty

Vlastnostem implicitního gridu grid-auto-rowsgrid-auto-columns můžete přiřazovat stejné hodnoty jako jejich „explicitním kolegyním“ – grid-template-rowsgrid-template-columns.

Příklady budu držet kolem definování řádků, ale samozřejmě platí i pro sloupce:

Výchozí je hodnota auto:

grid-auto-rows: auto;

Říká se tím, že výšku řádku definuje výška obsahu v buňkách.

Jedna hodnota pro všechny řádky

grid-auto-rows: 100px;
grid-auto-rows: 10%;
grid-auto-rows: 1fr;

V takovém případě prostě natvrdo nastavíme minimální výšku buněk. Obsah to samozřejmě může svou výškou přebít.

Více hodnot, které se při větším počtu sloupců opakují

grid-auto-rows: 100px 200px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 1fr minmax(100px, auto);

Hodnota 100px 200px říká, že první a pak každý lichý nedefinovaný a tedy implicitní řádek bude mít výchozí výšku 100px, sudé řádky pak 200px.

Klíčová slova

grid-auto-columns: min-content;
grid-auto-columns: max-content;

Je samozřejmě možné používat funkce a klíčová slova, stejně jako při definici explicitní mřížky.

Ukázky máme tedy za sebou. Jak ale onen implicitní grid vzniká a kde je možné tyto vlastnosti využít?

Příklad: Více položek v gridu než je definovaných řádků

Jak už jsem říkal – vlastnosti grid-auto- častěji použijete pro řádky layoutu, tedy grid-auto-rows. Může se vám totiž snadno stát, že v mřížce je předem daný počet sloupečků, ale neznámý počet položek a tedy řádků:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Vlastnost grid-template-rows umí definovat rozměry známých řádků. Nezvládá ovšem definovat opakování hodnot.

Pokud bychom chtěli střídat výšku 100px200px pro liché a sudé řádky, přičemž počet řádků neznáme, i pro tohle je výborná vlastnost grid-auto-rows:

.container {
  grid-auto-rows: 100px 200px;
}  

Příklad: Umístění položky mimo explicitní grid

Dalším možností, jak může explicitní grid vzniknout, je umístění položky zcela mimo definovanou mřížku. Vezměme že ji definujeme jako 2 × 2:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

Jenže v HTML máme šest a ne čtyři položky. A co víc – pátou a šestou položku nezbedný kodér umístil na pozice v mřížce, které neexistují:

.column.fifth {
  grid-column: 3;
  grid-row: 1;
}

.column.sixth {
  grid-column: 3;
  grid-row: 2;
}

Prohlížeč nám při pokusu o umístění do třetího sloupce, tedy na pozici nedefinovanou explicitním gridem, grid rozšíří. Ale rozšíří jej mřížkou implicitní. Výchozí rozměry prvků nám tedy zřejmě nebudou vyhovovat.

Opravíme to až touto deklarací:

.container {
  grid-auto-columns: 1fr;
}

Podpora v prohlížečích

Vlastnosti grid-auto-rowsgrid-auto-columns podporuje kdejaký prohlížeč, včetně Internet Exploreru od verze 10. Jupí! V IE je potřeba používat vlastnosti pojmenované jako -ms-grid-rows-ms-grid-columns nebo to řešit Autoprefixerem.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?