Jednotka fr

Sloupce s pevnou šířkou v pixelech se stránce nepřizpůsobí. V širokém okně zůstane vedle mřížky prázdné místo a do úzkého se mřížka nemusí vejít.

Proto má mřížka vlastní jednotku fr (z anglického fraction, podíl). 1fr je jeden podíl volného místa v kontejneru mřížky. Prohlížeč nejdřív odečte šířku sloupců s pevnou velikostí a zbytek pak rozdělí mezi sloupce s jednotkou fr podle jejich čísel.

grid-template-columns: 1fr 1fr 1fr;

Tři sloupce, každý s jedním podílem, takže každý dostane třetinu šířky. Když se kontejner rozšíří nebo zúží, sloupce se změní s ním.

Podíly nemusí být stejné. Při 2fr 1fr 1fr dostane první sloupec dva podíly a zbylé dva po jednom, takže první je dvakrát širší:

Jednotku fr můžeme kombinovat i s jinými jednotkami. 200px 1fr vytvoří sloupec široký 200 pixelů a druhý, který zabere všechno zbývající místo. To se hodí třeba pro menu vedle obsahu.

Když jsou všechny sloupce stejné, můžeme je zapsat zkráceně pomocí funkce repeat() (opakovat). Funkce má stejně jako rgb() název a hodnoty v závorkách. První hodnotou repeat() je počet sloupců a druhou jejich šířka, takže repeat(3, 1fr) znamená totéž co 1fr 1fr 1fr.