Számos cikk és videó található a CSS Grid Layoutról, ahol a 2018-as webdesign trendek fő újdonságaként emlegetik, ami átformálja a designerek és a fejlesztők látásmódját a webfejlesztés terén.

De miért is lett ennyire felkapott, mivel tud többet és miben rejlik a népszerűsége?

Fejlesztői szemmel ástam bele magam a témába, hogy hogyan és miként is könnyítheti meg a munkát más framework használatával szemben.

CSS Grid-del a HTML kód tisztább lesz. Bár ez nem a legfontosabb előny, valószínűleg az első, amit észre fogsz venni az első próbálkozásaidnál, ha például a Bootstrappel dolgoztál előtte.

Lássuk az alábbi példát az összehasonlításhoz:

Ez Bootstrap használatával a következőképp néz ki:

És ez CSS Grid-del:

Rögtön látjuk, hogy ez a jelölés egyszerűbb, csupán egy container div és a benne lévő item-ek.

Nincs szükség a csúnya osztálynevekre és az extra sorokat jelölő divekre sem.

Bár a Bootstrap példája nem követeli meg a CSS hozzáadását, a CSS Grid példájához szükséges az alábbi CSS leírás:

Ez lehet egy érv a Bootstrap javára, mert nem kell aggódni a CSS miatt ahhoz, hogy egyszerű layoutot hozzunk létre, mivel egyszerűen definiáljuk az elrendezést a HTML-ben a megfelelő CSS class-ok használatával.

Viszont mi van akkor, ha ezt az egyszerű layoutot mobilon át szeretném rendezni?

A fenti példa mobilon nézzen ki így:

CSS Grid-del a megoldás roppant egyszerű: csak egy media query-t kell felvennünk a CSS-ben a következőképp:

Ezt az átrendezést Bootstrap használatával nem lehet csak a CSS hozzáadásával megoldani, itt bizony már a HTML-hez is hozzá kell nyúlnunk, méghozzá JavaScript segítségével:

Ebben a példában jön ki igazán a CSS Grid Layout legnagyobb előnye, hogy a HTML forrás manipulálása nélkül könnyedén átrendezhetjük a layoutunkat.

Egy másik probléma a Bootstrappal, ami valljuk be már minden fejlesztőt bosszantott legalább egyszer, ha egy olyan oszlopkiosztást szeretnénk ami 5, 7 vagy 9 részre osztja a gridet.

Mivel a Bootstrap 12 oszlopra bontja a gridet, így csakis olyan oszlopkiosztások lehetségesek, amelyek a 12 osztói. Nyilván megoldható Bootstrappel is, sőt a Bootstrap 4-ben, mivel Flexbox-ot használ, már ott is megvan az a lehetőség, hogy a fenti bontásban hozzuk létre a layoutot, de ez inkább hackelés, mintsem egyszerű megoldás.

A CSS Grid esetében a rácsot pontosan az oszlopok mennyisége határozza meg.

Itt van egy hét oszlopos layout:

És a hozzá tartozó CSS:

A grid-template-columns: repeat(7, 1fr); sor hozzáadásával máris implementáltuk a 7 oszlopra bontott gridet.

Végezetül még egy fontos szempont, amit nem hagyhatunk ki: a böngésző támogatottság.

Egy friss lekérdezés alapján jelenleg a CSS Grid támogatottsága 86,66%, ami nem is annyira rossz, főleg ha belegondolunk abba, hogy használatával nem módosítjuk a HTML forrásunk. Más szóval, a CSS Grid egy tisztán vizuális eszköz, amivel megváltoztathatjuk az oldalunk elrendezését anélkül, hogy a HTML kódon módosítanánk. Ebből következik egy egyszerű, de meglepő igazság, hogy a régi böngészőkben a CSS Grid támogatásának hiánya nem befolyásolja a látogató tapasztalatait, hanem inkább csak a tapasztalatot különbözteti meg.

Összegezve: megéri kísérletezni a CSS Grid Layouttal, nemhiába felkapott a téma. Ami biztos, hogy más szemléletmód szükséges a CSS Grid használatához, mint egy Bootstrap-es sitebuild elkészítéséhez. Mindenki döntse el maga, hogy mi számára a kényelmesebb: HTML-t írni és class-okkal feldíszíteni, vagy CSS-t kreálni.