Grid layout témában hetente jönnek ki a cikkek, tutoriálok és előadások. Mi, itt az Innonic-nál szeretünk folyton fejlődni és új dolgok után nézni. Erre is kíváncsi voltam, hogy néz ki a gyakorlatban, ezért kicsit beleástam magam.

Mi az a CSS Grid Layout?

A CSS Grid Layout nem más, mint egy technológia, ami segít, hogy a weboldalunk vagy appunk elemeit egyszerűen el tudjuk helyezni 2 dimenzióban a rendelkezésünkre álló területen.

Újhullámos layoutozás

Így tudnám leírni. Mára már mindenki ettől várja a megváltást és meg kell mondjam, elég ígéretes és egyszerűen használható.

*2017. október 17-étől támogatja az MS Edge is, ami azért nagy szó, mert az összes nagy böngésző egy éven belül megcsinálta a támogatását.

De tényleg ennyire új lenne ez a technológia?

Nem… Dr. Bert Bos szerint – aki Håkon Wium Lie-val a CSS szülőatyja is – a grid alapú elrendezés már kezdetek óta tervben volt. 1996-ban Bos, Lie és Dave Ragett előjött egy új modellel, ami az első próbálkozás volt.

Ezután 2005-ben Bos publikálta az Advanced Layout Module-t. Ennek az alapjai már hasonlítanak a most használt grid rendszerre. A logikája legalább is.

Ezeket a koncepciókat viszont sose vették tényleges használatba. A dolgok akkor kezdtek felpörögni, amikor Phill Cupp egy terméket akart létrehozni a Microsoftnál. Egy olyan eszköz kellett neki, amivel hatékonyan lehet webes felületeket létrehozni. Elkezdte ütni a UI csapatot, hogy találjanak ki valamit.

Ez az egész amúgy a Windows 8 tervezése közben történt, amikor rengeteg appot kellett gyártania a Microsoftnak. Cupp egyre jobban felismerte, hogy a webnek szüksége van egy eszközre, ami megkönnyíti a layout tervezést.

Cupp a Silverlightban1 lévő grid rendszert látta a legjobbnak. Ezt kezdték el reszelgetni, végül – kapaszkodjon meg mindenki a székében – 2011 elején az Explorer 10-be elkészült egy kezdetleges grid layout rendszer. Ment is a W3C-nek a vázlat április 7-én. A megírásban Elika J. Etemad, egy W3C-s munkatárs is segédkezett. Az alapok tehát már jópár évesek. Ez a verzió persze még nem volt az igazi, hiányoztak belőle a mostani funkciók.

Ha nézelődtünk már grid témában akkor ismernünk kell egy mogorván kinéző brit nénit, akinek Rachel Andrew a neve. Ő (is) felkarolta a gyerekcipőben járó technológiát és több cikket is írt róla. Hihetetlen ilyeneket olvasni tőle 2012-ből:

Before we get started, it is important to note that, at the time of writing, these examples work only in Internet Explorer 10. CSS3 grid layout is a module created by Microsoft, and implemented using the -ms prefix in IE10.

Sok döcögés után Rachel elkezdett megalkotni egy átfogó oldalt a gridnek, rengeteg demóval és példával. Ezen keresztül akarták bemutatni a benne rejlő lehetőségeket a közönségnek. A Grid by Example még mindig frissül és hasznos tudást rejt, ha bele akarsz kezdeni a kipróbálásába.

2013-tól a Grid Layout egyre több front-end fejlesztőt kezdett meghódítani. Létrejöttek menő projektek Codepenen és egész demó oldalak is pl. Jen Simmonstól, aki nagyon jó példákat készített, érdemes átnézni őket! (ugyanitt: fejlesztő csajok előre!! ;))

2017 elejétől már támogatják a böngészők is a Gridet. Március 7-én a Firefox, majd rögtön utána 9-én a Chrome, 21-én az Opera, 27-én pedig a Safari.

Ez igazából azért vicces, mert az úgymond “új” Gridet a Microsoft implementálta legkésőbb. Korábbi Grid Layout verziókat persze támogatott az Explorer 2012-től, az Edge pedig már 2015-ben, de az újat nem sikerült azonnal befogadni.

Konklúzió

A Grid Layout logikája nagyon átgondolt, könnyű értelmezni és azt kell, hogy mondjam UI designer barát.

A rácsos elrendezésben egészen könnyű eligazodni, hiszen mindenhol találkozunk vele: ott van a naptárunkban, az Excelben, mindenféle táblázatban. Ha tágan értelmezzük még a billentyűzetünkben is. Nem csoda, hogy gyorsan rááll az agyunk és rajzolgatások nélkül ki tudjuk számolni, hogy hány oszlop és sor kell nekünk, hogy mit hova akarunk elhelyezni stb.

Különböző képernyő méretekre való tervezés mára már nem nyűg, nem kell semmilyen keretrendszer hozzá. Ha valamit át akarunk pozícionálni, akkor nem kell 600 dolgot átírnunk. A grid-areas segítségével pedig vizuálisan is értelmezhető kódot írhatunk.

A Grid Layout hatékonysága elgondolkodtat, hogy lehetne-e fejlesztő közelibb drótvázazásra is használni…