Mřížku lze definovat jako protínající se sadu svislých a vodorovných čar. Rozvržení mřížky CSS rozděluje stránku na hlavní části. Vlastnost Grid nabízí systém rozvržení založený na mřížce s řádky a sloupci. Usnadňuje navrhování webových stránek bez umístění a plovoucí. Rozložení mřížky nám umožňuje vytvářet mřížkové struktury zobrazené v CSS, nikoli v HTML.

Podobně jako tabulka umožňuje uživateli zarovnat prvky do řádků a sloupců. Ale ve srovnání s tabulkami je snadné navrhnout rozložení pomocí mřížky CSS. Sloupce a řádky na mřížce můžeme definovat pomocí grid-template-rows a mřížka-šablona-sloupce vlastnosti.

Mřížkový kontejner lze vytvořit deklarováním displej: mřížka nebo zobrazení: inline-grid na prvku. Kontejner mřížky obsahuje položky mřížky, které jsou umístěny uvnitř řádků a sloupců.

Grid v/s Flexbox

Obecně vyvstává běžná otázka, jak se mřížka liší od flexboxu. Mřížka je pro dvourozměrná rozvržení (řádky a sloupce současně), zatímco flexbox se používá pro jednorozměrná rozvržení (buď v řádku nebo sloupci). Flexbox se používá, když má být cokoliv v přímé linii.

Flexbox se používá pro uspořádání prvků do jednoho sloupce nebo do jednoho řádku. Na druhou stranu, mřížka je nejlepší pro uspořádání prvků ve více sloupcích a řádcích.

Pojďme pochopit mřížku v CSS pomocí příkladu.

Příklad

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Výstup