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.