Martin Michálek  – 29. 7. 2019

Vlastnosti grid-template-rowsgrid-template-columns slouží k nastavení explicitní (tedy námi výslovně definované) mřížky v CSS gridu.

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

Jednoduchý příklad

Vezměne toto HTML:

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

Pokud bychom chtěli zajistit rozvržení do mřížky 4 × 4, použijeme následující CSS kód:

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
}

Vysvětleme:

  • display:grid – „zapíná“ mřížkové zobrazení.
  • grid-template-columns:50% 50% – definuje dva sloupečky mřížky. Každý bude zabírat polovinu šířky rodičovského kontejneru.
  • grid-template-rows:auto auto – definuje dva řádky mřížky. Hodnota auto říká, že se výška každého z nich se počítá automaticky podle výšky obsahu.



Poznámka k hodnotě auto v definici řádků: Grid sjednocuje výšky položek v každém z nich, takže když změníme výšku jedné položky, její kolegyně se přizpůsobí.

<div class="container">
  <p class="column">1</p>
  <p class="column">2</p>
  <p class="column">3</p>
  <p class="column">4<br>hi!</p>
</div>



Co když je položek více než definuje grid? (Implicitní vs. explicitní grid)

Teď se stane ošlivá a zlá věc – zákeřný frontend kodér do HTML přidá pátou položku:

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

Jak bude vypadat pátá položka zobrazená v gridu 2 × 2? V tomto případě stejně jako předchozí čtyři.

Algoritmus gridu ji přidělí 50% šířku a automatickou výšku.

Jiná by byla situace, pokud bychom změnili definici výšky položek gridu:

.container {
  grid-template-rows: 2rem 2rem;  
}

Pátá položka zde pak nemá definovanou výšku a musí použít nějakou výchozí, v tomto případě opět auto.



Rozměry položek vložených nad rámec počtu položek definovaných explicitním gridem, tedy vlastnostmi grid-template-rowsgrid-template-columns je možné určit vlastnostmi grid-auto-columnsgrid-auto-rows, které definují implicitní grid.

Další možnosti zápisu gridu

Hodnoty v následující tabulce je možné aplikovat jak na grid-template-columns, tak na grid-template-rows, tedy na sloupce i řády layoutu.

Možnost Ukázka hodnoty
Bez explicitního gridu none
Kombinace jednotek 150px auto 1fr 1fr
Pojmenovávání stop [first] 150px [second] 1fr [end]
Opakování repeat(12, 1fr)
Masonry masonry

Další řadu možností nabízí funkce minmax() a související hodnoty pro nastavení šířky podle obsahu jako je min-content, max-content nebo fit-content.

Pojďme se ale podívat na možnosti hodnot z tabulky.

Bez explicitního gridu

Hodnota none tvoří výchozí stav:

.container {
  grid-template-columns: none;
}

Občas se ale může hodit použít ji i ve vlastním kódu, například když rušíme explicitní grid. Pokud to provedeme, platí pravidla pro implicitní, tedy nepřímo vyjádřenou mřížku – grid-auto-columnsgrid-auto-rows.

Kombinace jednotek a jednotka fr

V gridu je možné pro definici řádků a sloupečků používat všechny možné jednotky, které už pro rozvržení v CSS používáte.

Je tady ale jedna novinka – jednotka fr. Jde o flex fraction a dá se o v jejím případě mluvit jako o podílu na zbytku.

Zápis může vypadat například takto:

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


1fr je v chování velice podobné číslu 1, které používáte ve vlastnosti flex u flexboxu.

Pojmenovávání stop

Pojmenovávání stop se může hodit pro použití ve vlastnostech, které definují umístění prvků v gridu jako je grid-column, grid-row nebo grid-area.

Každý sloupec nebo řádka je v gridu definovaná dvěma stopami.

Sloupce a řádky mřížky je možné si přestavit jako sloupce a řádky v tabulce. Stopy jsou rámečky kolem buněk tabulky.

.container {
  display: grid;
  grid-template-columns: [first-col] 50% [second-col] 50% [last-col];
  grid-template-rows: [first-row] auto [second-row] auto [last-row];  
}

V ukázce je tedy první položka gridu umístěná vodorovně na pozici mezi first-colsecond-col. Svisle pak mezi first-rowsecond-row.



Opakování

U složitějších mřížek by bylo nepříjemné zapisovat řadu stejných hodnot do řádky. Vezměme například dvanáctisloupcovou mřížku:

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

Proto je tady funkce repeat(), která opakování zamezuje:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

Zápisem repeat(6, 1fr) říkáme: „Napiš šestkrát po sobě hodnotu 1fr.“

Masonry, zděné rozvržení

Hodnota masonry je speciální, protože by v budoucnu měla zařídit nativní masonry (nebo zděný) layout.

Nativně vykreslený masonry layout. Zdroj: Rachel Andrew.

Toto ale na konci léta roku 2021 zatím podporuje jen prohlížeč Firefox v případě nastavení volby uživatelem.

Podpora v prohlížečích

Internet Explorer 11 vlastnosti grid-template-rows/-columns nepodporuje. Namísto grid-template-columns používá vlastnost -ms-grid-columns a místo grid-template-rows pak -ms-grid-rows. Toto se dá naštěstí obejít pomocí nástroje Autoprefixer.

Tento stařičký, ale občas ještě používaný prohlížeč, také nezvládá automatické umísťování položek do mřížky. I to je možné alespoň částečně vyřešit pomocí Autoprefixeru.

V moderních prohlížečích nebudete s podporou mít problém.