Funkce repeat() v CSS gridu (a klíčová slova auto-fill a auto-fit)

Funkce (nebo přesněji řečeno „zápis“) repeat() slouží k usnadnění opakujících se předpisů pro sloupce nebo řádky mřížky v CSS gridu.

Zápis můžete realizovat například takto:

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

Uvedené má pak stejný výsledek jako ručně psaná verze:

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

Možných hodnot je ale více:

repeat(4, [col-start] 1fr [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(auto-fill, minmax(100px, 1fr));

V druhém parametru zápisu repeat() prostě můžete uvést libovolnou deklaraci stopy mřížky, které budete znát už například z vlastností grid-template-rows/-columns.

Co když ale chcete deklaraci sloupců nebo řádků opakovat, ale ještě nevíte kolikrát? Co když prostě nevíte, kolik jich tam chcete, protože nevíte, kolik bude mít rodičovský prvek v HTML potomků?

Tady vstupují do hry zajímavá klíčová slova auto-fill a auto-fit.

Automatické opakování s auto-fill a auto-fit

Použití zápisu repeat() v kombinaci s klíčovými slovy auto-fill a auto-fit se velmi hodí, pokud neznáte počet položek. Následující obrázek snad napoví, čím se liší.

Rozdíly jsou zhruba následující:

• Oba zápisy v repeat() přidávají nové neviditelné buňky mřížky, tak aby se vyplnil volný prostor.
• auto-fill se snaží vyplnit prostor prázdnými buňkami.
• auto-fit při vykreslování nové prázdné buňky eliminuje a tedy umožní vyplnit prostor roztažením (napasováním, proto „fit“) velikosti stávajících buněk.

Myslím si, že obě klíčová slova dává smysl použít jen s funkcí minmax(), aby se buňky mohly roztahovat od minima po maximum velikosti.

Příklad s auto-fill

auto-fill bude při roztahování dostupného prostoru prioritizovat přidávání neviditelných buněk mřížky.

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Příklad s auto-fit

auto-fit bude při roztahování dostupného prostoru prioritizovat roztahování stávajících buněk. Ve skutečnosti tedy buňky přidává také, ale při výpočtu šířek ty neviditelné eliminuje.

.container {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Zkuste si v CodePenu změnit šířku okna a dívat se přitom na rodičovský element ve vývojářských nástrojích Chrome nebo Fifefoxu. Uvidíte něco podobného jako je na obrázku výše.

Podpora v prohlížečích

V problematickém IE 11 je potřeba funkci zapisovat jinak: například repeat(4, 1fr 20px) jako (1fr 20px)[4]. Použití s Autoprefixerem vám ale umožní používat jeden, standardní zápis.

Bohužel ale není možné použít automatické opakování s klíčovými slovy jako auto-fill a auto-fit.