Mi az a grid rendszer? A sitebuilderek (erre aztán tényleg nincs egy normális magyar szó, a weboldal készítő nem igazán fedi le ezt) weboldalak szélességét általában a gyakran használt képernyőméretekhez igazítják. Eleinte a képernyők felbontása 1024×768 pixel volt. Aztán jött az 1200×800, majd az 1366×768. Meg persze a full HD (1920×1080) és minden más. A Macbook Air megjelenésével elkezdtek megjelenni a 16:9-től eltérő képarányok is, mint pl. az 1440×900. Egy idő után már annyira sokféle volt, hogy kellett valami olyan szabvány, ami a kijelzők felbontásának nagyrészén elfér, azaz a maximális szélességnél kisebb. Ez 1140 pixel lett. Tehát az 1140 pixel széles grid rendszer azt jelenti, hogy a weboldalak látható maximális szélességét 1140 pixelben maximalizálja a fejlesztő. Ez azért jó, mert ha egy 1200 pixel széles kijelzőn nézi valaki az adott weboldalt, ott el fog férni a teljes tartalom, tehát nem fog kilógni és nem kell horizontálisan scrollozni. Persze van, aki 1160 vagy 1200 pixel szélességet használ attó függ.
Mivel ma már nem kell szenvedni az Internet Explorer miatt (mivel a Microsoft Edge böngészője is a Chromium engine-t használja), ezért a modern böngészők elterjedése miatt gyakorlatilag bármilyen grid rendszert használhatunk, mert vannak többek között olyan CSS defínciók, mint a max-width, vagy olyan mértékegységek, mint a vw ami lehetővé teszi, hogy az adott böngészőhöz dinamikusan igazítsuk a megjelenítést. Sokáig az Internet Explorer miatt, nekünk fejlesztőknek olyan trükkökhöz kellett folyamodni, mint hogy külön Internet Explorer CSS-t kellett írni, mert sok amúgy teljesen szabvány HTML paramétert vagy defíníciót, (mint pl. az inline-block!), az IE nem támogatott. Ez a probléma rengeteg olyan dolgot termelt ki magából, mint pl. a Can I Use?, ahol ellenőrizhetjük, hogy az adott definíciót, paramétert mi támogatja.
Ma már sok weboldalhoz arányosított CSS defíníciókat is készíthetünk, emiatt a pixelben megadott széles grid rendszerek már csak iránymutatók, kb bármilyen képernyőszélességhez írhatunk külön megjelenítést. A sokfajta mobileszköz miatt erre szükség is van. Az arányosított CSS defíníciók, mint az 1em (az alapértelmezett pixelben megadott értékhez képesti 1 egység) , vagy 100vw (a böngésző 100% szélessége) és a betűk méretére megadható százalékos arányokkal (font-size: 1.2vw, ami az adott szélességhez 1.2x-es méretet jelent) meg tudunk csinálni egy teljesen reszponzív, nem is pixelben megadott szélességű oldalt is.
A grid rendszerekből sokféle elérhető van, pl. az 1200px , vagy az 1400, de ezt felsorolni is nehéz. Aztán ott van a legelterjedtebb a Bootstrap, ami már nem is grid rendszer, hanem egy régóta létező CSS keretrendszer (framework), aminek előnye, hogy pillanatok alatt meg tudsz csinálni egy weboldalt, a „beépített” azaz előre megírt grid rendszerrel. Itt nemcsak az felosztott konténerméreteket tudod egy CSS class-szal megadni (pl. 1/3 – 1/3 – 1/3 szélességű háromra osztott elemek egymás mellett), hanem űrlapok, lenyílók, gombok, menük stílusa és sok minden előre meg van írva. Hátránya, hogy neked kell alkalmazkodnod egy meglévő rendszerhez és rengeteg olyan dolgot is kapsz mellé, amire nincs szükséged (van hozzá rengeteg Javascript is), emiatt lassabb mint egy meglévő rendszer. A másik, amit nem szeretek benne, hogy minden weboldal, amit Boostrappel csinálsz nagyon hasonló kinézetű és működésű lesz, hiszen ugyanazokat a definíciókat használod, max más színekkel.
Valójában ma már nem igazán éri meg a nulláról lebuildelni egy oldalt saját grid alapon. Előnye, hogy gyors, hátránya, hogy sok idő, ami sok pénz. Így inkább valamelyik jól bevált sablonnal, az abba beépített valamelyik népszerű page builderrel (WP Bakery, Elementor, Gutenberg, stb.) csinálom meg az ügyfél által megálmodott weboldalt. Ő ugyanazt kapja, csak gyorsabban és költséghatékonyabban.