Přejít k navigační liště

Zdroják » Webdesign » Jednotka fr: Podíl na rozměru v CSS gridu

Jednotka fr: Podíl na rozměru v CSS gridu

Články Webdesign

Fr je užitečná jednotka, která reprezentuje podíl na volném prostoru v CSS gridu. Pojďme si ji představit.

Nálepky:

Text vyšel původně na webu autora.

Jedná se o flexibilní jednotku, která reprezentuje podíl na volném prostoru v CSS gridu. Proto fr jako fraction unit.

Využívá se ve vlastnostech popisující mřížku, jako jsou grid-template-columns/rows nebo grid-auto-columns/rows.

Ale dost řečí a ukažme si nějaký kód:

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

Prostor se rozdělí na tři díly, ale vykreslí do dvou buněk gridu. První bude zabírat třetinu šířky, druhá dvě třetiny.

Raději zdůrazněme, že šířka buňky se ani zde nikdy nezmenší pod šířku obsahu. Rozdělení 1fr 2fr tedy bude platit jen v případě dostatku prostoru.

Je (a není) to jako procenta

Zjednodušeně by se tahle jednotka dala přirovnat k procentům (%), ovšem s tím rozdílem, že nemusíme počítat prvky gridu a řešit nastavení box modelu. Demo to ostatně ukáže v celé kráse.

Procentuální grid v demu nastavujeme jako grid-template-columns: 33.3% 33.3% 33.3%. Může to být fajn, ale procentuální hodnotu musíme vypočíst podle počtu sloupců v HTML. No a pokud by se nám ten změnil, nezbývá než upravovat také CSS.

Další problém je v box modelu, způsobu počítání šířky. Jak vidíte u prvního prvku v CodePenu, k procentuální šířce se musí ještě připočíst vnitřní okraj (padding) a bez změny počítání box modelu pomocí vlastnosti box-sizing nám prvky přetečou z rodičovského kontejneru.

Podíl na zbytku

Jednotka fr tvoří podíl na zbytku plochy, kterou neokupují prvky s rozměry nastavenými běžnými jednotkami délky, jako jsou %pxemrem a další.

Pomocí grid-template-columns: 80px 5em 2fr 1fr definuje čtyřsloupcovou mřížku. První sloupec má fixní šířku 80px. Druhý má šířku 5em, takže jeho šířka bude záležet na velikosti písma rodičovského prvku. Pokud nám zbude nějaký prostor, prohlížeč jej vydělí třemi (2fr + 1fr) a rozpočítá na dvě buňky definované podílovou jednotkou.

Nulová a desetinná čísla. Hodnoty, se kterými je legrace

Podívejme se ještě na jeden speciální příklad, který ukazuje použití nulové (0fr) a desetinné (0.1fr) hodnoty.

Mřížku definujeme takto:

.container {
  grid-template-columns: 0fr 0.5fr 0.1fr;
}

Pokud je nastavená nulová hodnota (0fr) vykreslí prohlížeč sloupec v šířce obsahu.

Poměrně užitečné jsou také desetinné hodnoty. Jejich součet je 0.6fr, takže zanechává 0.4fr prostoru prázdného.

Obojí se myslím může docela hodit, nemám pravdu?

Jo a – záporné hodnoty k jednotce fr přidávat nezkoušejte. K ničemu to nevede, už jsem to ověřil.

Poznámky na závěr

  • Asi jste postřehli, že grid-template-columns: 1fr se chová podobně jako bezjednotkový údaj ve flexboxu, např. flex: 1.
  • fr není jednotka délky a nedá se s nimi ani kombinovat. Nemůžeme tedy použít funkci calc() a výraz jako calc(1fr - 20px).

Podpora v prohlížečích

Podpora je skvělá. Nevím o žádném relevantním prohlížeči, který by jednotku fr v kombinaci s CSS gridem nezvládal. A to za relevantní prohlížeč v době psaní textu považuji i Internet Explorer 11.

ebook-vdcss3-prebal-final

Kniha „Vzhůru do (responzivního) designu“

Kompletní průvodce návrhem a implementací responzivních uživatelských rozhraní v e-booku a knize. Více informací.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.