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.