A rácsot függőleges és vízszintes vonalak metsző halmazaként határozhatjuk meg. A CSS-rács elrendezése az oldalt nagyobb részekre választja el. A Grid tulajdonság egy rács alapú elrendezési rendszert kínál sorokkal és oszlopokkal. Egyszerűvé teszi a weboldalak tervezését pozicionálás és lebegtetés nélkül. A rács elrendezése lehetőséget ad arra, hogy CSS-ben, nem pedig HTML-ben ábrázolt rácsszerkezeteket hozzunk létre.

A táblázathoz hasonlóan lehetővé teszi a felhasználó számára, hogy az elemeket sorokba és oszlopokba igazítsa. De összehasonlítva a táblázatokkal, egyszerű az elrendezés megtervezése a CSS-rács segítségével. A segítségével definiálhatunk oszlopokat és sorokat a rácson rács-sablon-sorok és rács-sablon-oszlopok tulajdonságait.

Egy rácstárolót úgy lehet létrehozni, hogy deklaráljuk a kijelző: rács vagy kijelző: inline-grid egy elemen. A rácstároló egy rács elemeit tartalmazza, amelyek a sorok és oszlopok belsejében vannak elhelyezve.

Grid v/s Flexbox

Gyakran felmerülő kérdés, hogy miben különbözik a rács a flexboxtól. A rács kétdimenziós elrendezésekhez (sorok és oszlopok egyidejűleg), míg a flexbox az egydimenziós elrendezésekhez (akár sorban, akár oszlopban) használható. A Flexbox akkor használható, ha bárminek egyenes vonalban kell lennie.

A Flexbox az elemek egyetlen oszlopba vagy egy sorban való elrendezésére szolgál. Másrészt a rács a legjobb az elemek több oszlopban és sorban történő elrendezésére.

Értsük meg a rácsot a CSS-ben egy példa segítségével.

Példa

 .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 

Kimenet