Přehled základních možností syntaxe

Grid-template-columns/rows

Definujeme na začátku naši vlastní mřížku(její rozměry). Řekneme tedy kolik a jak velkých chceme sloupců a řádků.

grid-template-columns: 20% 30% 30% 20%

grid-template-rows: 1em auto 1em

Grid-template-areas

Pro přehlednější a intuitivnější práci si můžeme jednotlivé části naší mřížky pojmenovat a poté pracovat s jejich jmény.

grid-template-areas:
                        "header header header"
                        "main main aside"
                        "main main aside"
                        "left center right"
                        "footer footer footer"           

Grid-template-auto

Máme také možnost nechat si mřížku vytvořit automaticky pomocí vlastnosti repeat, která nám zopakuje kolikrát chceme námi zadanou část.

grid-template-columns: 1fr repeat(4, 1fr 2fr) 1fr

Možné hodnoty/jednotky

Při zadávání vzoru mřížky můžeme využívat několik dalších jednotek vyjma těch, které již známe (%, em, rem, ...). Novou jednotkou, kterou najdeme jen u CSS Grid je jednotka fraction(fr), která nám určuje poměrnou část nějakého místa.

Dále lze využívat hodnoty minmax/min, max), min-content, max-content, fit-content(argument) a auto. Podrobnější informace najdete v učebním materiálu od doktora Trnečky v části o CSS Grid.