CSS grid layout

A CSS Grid Layout egy rács alapú elrendezési rendszer sorokkal és oszlopokkal, ami megkönnyíti a weboldalak tervezését anélkül, hogy float-olást vagy pozicionálást kellene használni a layout felépítéséhez. A megoldás ismerős lehet például a Bootstrap keretrendszerből, ahol előre megírt class-ok segítségével tudjuk a grid-et létrehozni. A natív CSS grid viszont egy gyárilag támogatott megoldás a modern böngészőkben. Sok dologban hasonlít a flexbox modelhez, annál azonban jóval komplexebb oldalszerkezet is létrehozható vele. A hivatalos leírás a W3C oldalán itt olvasható.

CSS grid konténer

A layouthoz felépítéséhez először szükségünk lesz egy konténer elemre, amit a display: grid beállítással tudunk megadni. Ugyanitt kell megadni a sorok és oszlopok számát illetve méretét a grid-template-rows és a grid-template-columns megfelelő beállításával. A tartalom igazításához az align-content és a justify-content használható.

Child elements, avagy a leszármazott elemek

A konténeren belül tudjuk megadni, hogy az egyes elemek mekkora méretűek legyenek és hol helyezkedjenek el a rácson. Ehhez a grid-column és a grid-row beállításokat használhatjuk. Bonyolultabb rácsok esetén a grid-area segítségével nevet adhatunk az egyes területeknek és így könnyebben tudunk rá hivatkozni a későbbiekben.

Forráskód

A videóban elkszített minta weboldalt ide kattintva tudod megnézni.

CSS grid layout bemutató videó

A videóban egy klasszikus 12 oszlopos grid-et hozunk létre. A 12-es osztás előnye, hogy sok elrendezést támogat, mert osztható kettővel, hárommal, néggyel és hattal is.