Sloupce mřížky šablony / řádky mřížky šablony - Triky CSS

Vlastnosti grid-template-rowsa grid-template-columnsjsou primárními vlastnostmi CSS pro vytvoření rozložení mřížky, jakmile je prvkem kontext mřížky ( display: grid;).

Existují také -ms-grid-columnsa -ms-grid-rows, které jsou starou IE verzí tohoto. Možná budete chtít zvážit Autoprefixing, abyste je mohli získat, nebo ne. Bylo také divné období, kdy byli grid-definition-columnsa grid-definition-rows, ale to už není věc.

Zde je příklad odvozený z dokumentace společnosti Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

To definuje počet řádků / sloupců v mřížce a také jejich dimenzi.

Tyto dvě vlastnosti podporují seznam hodnot oddělených mezerami. Každá hodnota definuje nový sloupec / řádek nastavením dimenze. Seznam 4 hodnot bude mít za následek 4 sloupce / řádky. Jedna hodnota vytvoří jeden sloupec / řádek.

Přijaté hodnoty: délka (jako pxnebo em), procenta, frakce ( frviz níže), auto(nebo fit-content), min-content, max-contenta minmax(), nebo repeat()funkce.

Ve výše uvedeném příkladu kódu to znamená:

Sloupec 1 ( klíčové slovo auto ): Sloupec je přizpůsoben obsahu ve sloupci.
Sloupec 2 („100px“): Sloupec je široký 100 pixelů.
Sloupec 3 („1fr“): Sloupec zabírá jednu zlomkovou jednotku zbývajícího prostoru.
Sloupec 4 („2fr“): Sloupec zabírá dvě zlomkové jednotky zbývajícího prostoru.

Řádek 1 („50px“): Řádek je vysoký 50 pixelů.
Řádek 2 („5em“): Řádek je vysoký 5 em.
Řádek 3 ( klíčové slovo s minimálním obsahem ): Řádek je tak malý, jak to obsah dovolí.
Řádek 4 ( klíčové slovo auto ): Řádek je přizpůsoben obsahu v řádku.

opakovat()

repeat()Funkce byl speciálně navržen pro tento modul. Umožňuje definovat vzor opakovaný Xkrát. Jako repeat(6, 1fr);. Řekněme, že chcete udělat 12 sloupců stejné šířky od sebe vzdálených o 1% okraj; můžete definovat 1fr repeat(11, 1% 1fr). Je to stejné jako 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Fr jednotka

frJednotka může být použita pro grid-rowsa grid-columnshodnoty. Znamená to „zlomek dostupného prostoru“. Přemýšlejte o tom jako o procentech dostupného prostoru, když jste odstranili sloupce / řádky pevné velikosti a obsahu. Jak říká specifikace:

Distribuce zlomkového prostoru nastane poté, co všechny velikosti řádků a sloupců založené na délce nebo obsahu dosáhnou svého maxima.

Příbuzný

Náš nejlepší zdroj pro všechny věci CSS grid je náš Kompletní průvodce po CSS Grid.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.