Vlastnost grid-auto-flow

Naposledy upraveno: 2. 8. 2019 – Autor: Martin Michálek

Vlastnost grid-auto-flow určuje, jak bude fungovat algoritmus automatického umísťování prvků do mřížky v CSS gridu.

Hodnoty

Hodnota Co dělá?
row Výchozí hodnota. Prvky layoutu se vykreslují po řádcích.
column Prvky layoutu se vykreslují po sloupečcích.
dense Vykresluje se po řádcích, ale prohlížeč může vyplnit mezery změnou pořadí prvků.
column dense Vykresluje se po sloupečcích a prohlížeč může vyplnit mezery změnou pořadí prvků.

Příklad: změna směru vykreslování pomocí grid-auto-flow: column

Tohle je jednoduché, prostě se jen změní směr vykreslování z řádků na sloupečky.

Vezměme, že máme šest položek v layoutu:

<div class="container">
  <p class="column">1</p>
  <p class="column">2</p>
  <p class="column">3</p>
  <p class="column">4</p>
  <p class="column">5</p>
  <p class="column">6</p>
</div>

Layout je definovaný jako mřížka o třech sloupcích a dvou řádcích:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

Výchozí směr vykreslení je grid-auto-flow:row, tedy po řádcích:

Můžeme jej ale změnit do svislého (sloupcového) směru:

.container {
  grid-auto-flow: column;
}

V CodePenu si to můžete zkusit také pro vlastnosti implicitního gridu: grid-auto-rows a grid-auto-columns, stačí odstranit příslušný komentář v CSS.

Příklad: zahuštěné vykreslování pomocí grid-auto-flow:dense

Hodnota dense zajistí „zahuštěné“ vykreslení. V zásadě to znamená, že prohlížeč se snaží o to, aby ve směru vykreslení nezůstavaly v layoutu mezery mezi prvky. Mezery případně zůstanou až na konci layoutu.

Důležité je, že prohlížeč může po nastavení grid-auto-flow:dense změnit pořadí vykreslení prvků.

Ale namísto řečí pojďme na příklad. Opět zde máme šest položek:

<div class="container">
  <p class="column column-1">1</p>
  <p class="column column-2">2</p>
  <p class="column column-3">3</p>
  <p class="column column-4">4</p>
  <p class="column column-5">5</p>
  <p class="column column-6">6</p>
</div>

Layout je definovaný takto:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  grid-auto-flow: dense;  
}

Vysvětleme:

  • Ve vlastnosti grid-template-columns uvádíme, že je možný libovoný počet sloupečku (funkce repeat()) ale každý musí být minimálně 120px široký minmax(120px, 1fr).
  • grid-auto-flow: dense říká prohlížeči: Vykresli to zahuštěně, takže nezáleží na pořadí prvků, ale na tom, aby ve směru layoutu (což je tady row) nezůstaly mezery.

Podpora v prohlížečích

Vlastnost grid-auto-flow a její hodnoty jsou plně podporovány ve všech prohlížečích s jedinou výjimkou – Internet Explorerem.

V IE nám bohužel nepomůže v případě této vlastnosti nepomůže ani Autoprefixer nebo jiný nástroj. Můžeme na něj ale vyzrát vhodným napsáním kódu tak, abychom měli pod kontrolou desktopové zobrazení, které Explorer používá, a prohlížečích a vlastnosti grid-auto-flow nechali jen menší displeje.

Komentáře