Márciusban a Mozilla kiadta a Firefox 52-t, amely kiegészült a CSS Grid elrendezés támogatásával. Ha nem ismered a CSS Gridet, ez egy kétdimenziós elrendezési rendszer a web számára, amely lehetővé teszi számunkra, hogy elrendezési mintákat hozzunk létre natívan a böngészőben. Ez azt jelenti, hogy néhány sor CSS segítségével könnyedén újrateremthetjük az ismerős rácsokat. Ez azt is jelenti, hogy rengeteg olyan dolgot tehetünk a CSS-szel és az elrendezésekkel, ami korábban nem volt lehetséges… de erről majd később.
Egy gyors megjegyzés: Ez a bejegyzés nem a CSS Grid átfogó alapozója, és feltételezi a CSS Grid alapszintű ismeretét. Ha még nem ismered, ajánlom, hogy nézd meg a fantasztikus CSS Grid Layout oldalt az MDN-en.
A webes elrendezések mindig is trükkösek voltak. Amikor a webet először bevezették, nem volt módszer az elrendezésekre. Aztán jöttek a táblázatok (táblázatokban, táblázatokban, táblázatokban). Ez haknizós és furcsa volt, de működött. Amikor a 90-es évek végén bevezették a CSS-t, a fejlesztők elkezdhették használni a div-eket és a floatokat a dizájn és az elrendezésekhez. Ez végül keretrendszerekhez és rácsrendszerekhez vezetett, amelyek segítettek értelmet adni az olyan “bonyodalmaknak”, mint a lebegőelemek törlése, a negatív margók, a reszponzív tervezés és így tovább. És a dolgok már évek óta így mennek. Több ezer gridrendszer létezik, de többé-kevésbé mind ugyanolyan.
Most, hogy a CSS Grid Layout valósággá vált, meg akartam nézni, mi kell ahhoz, hogy egy meglévő grid keretrendszert CSS Griddel helyettesítsünk. Ehhez a kísérlethez a népszerű Bootstrap keretrendszert választottam.
Elkezdtem egy alap webhely létrehozásával a Bootstrap rácsháló használatával:
Nézd meg a CodePen-en.
Szóval bontsuk ezt le és alakítsuk át a CSS Grid használatára.
A Bootstrapben a .container osztály mindent körbecsomagol és beállítja a szélességi korlátozásokat. Emellett a bal és a jobb szélhez egy kitöltést ad hozzá, és mindent középre állít. Itt nincs sok változtatnivaló. A Bootstraphez hasonlóan a konténer osztály is praktikus lehet a CSS Grid használatával. Én így hoztam létre újra:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}A reszponzív töréspontokat is hozzáadhatjuk a következőkkel:
@media (min-width: 992px) { .container { width: 970px; }}A Bootstrap a .row osztályt használja az oszlopok felgöngyölítésére, és negatív margót biztosít a bal és jobb oldalon, hogy negligálja az egyes oszlopok által hozzáadott kitöltést. Az olyan hackekre, mint a negatív margó, a CSS Grid használatával már nincs szükség, de ha elolvastad a dokumentációt, akkor tudod, hogy a CSS Gridnek szüksége van egy rácskonténerre. A .row osztály tökéletes hely erre. Hadd mutassam meg, mit csináltam, aztán lebontjuk.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid létrehozza a rácskonténert.
A grid-template-columns tulajdonság meghatározza a rács oszlopait. Használhatunk szóközöket az egyes oszlopok külön-külön történő definiálásához, de itt a repeat jelölést használjuk a 12 egyenlő méretű oszlop definiálásához. A 1fr az egyes oszlopok szélességére utal. Az MDN a fr egységet egy új egységként definiálja, amely “a rács tárolójában rendelkezésre álló hely töredékét jelenti”. A fr egységekről többet olvashat az MDN-en. A grid-template-columns tulajdonságról is bővebben olvashat.
Végül a grid-gap tulajdonság egy rövidített tulajdonság, amely meghatározza mind az oszlopok közötti, mind az oszlopok sorai közötti helyet. Gondoljunk rá úgy, mint az ereszcsatornánkra. A grid-gapről itt olvashat bővebben.
Most már csak az oszloposztályok vannak hátra. A Bootstrap olyan oszloposztályokat használ, mint a .col-md-6 vagy .col-lg-8, hogy meghatározza, hány oszlopot kell átfognia egy div-nek. Emellett lebegtetik a div-et, és balra és jobbra paddingot adnak hozzá, hogy ereszcsatornákat hozzanak létre az oszlopok között. Ezeknek az osztályoknak az újrateremtése hihetetlenül egyszerű a .grid-column rövidített tulajdonságnak köszönhetően. Ha például a .col-md-6 osztályt szeretnénk újra létrehozni, a következőt használhatjuk:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Egyszerű, igaz? Nincs lebegő. Nincs kitöltés. Egyszerűen csak működik. A grid-column rövidítés egy elem méretét és helyét adja meg. Használhatjuk a span-et, hogy jelezzük, hogy ennek a bizonyos elemnek hat oszlopon kell átívelnie. Az ereszről automatikusan gondoskodik a wrapper grid-gap tulajdonsága miatt. A grid-column tulajdonságról itt tudhat meg többet.
Mi történik, ha mindezt összerakjuk? Nos, a weboldal pontosan ugyanúgy néz ki, de képesek vagyunk teljesen eltávolítani a Bootstrap függőséget és natív CSS rácsokat használni.
Nézze meg a frissített weboldalt a CodePen oldalon.
Az ilyen típusú kísérletezés szórakoztató tanulási gyakorlat, de veszélyes is lehet. A bölcs filozófus Jeff Goldblumtól kölcsönözve egy sort:
“Te … annyira el voltál foglalva azzal, hogy megteheted-e vagy sem, hogy nem álltál meg gondolkodni azon, hogy meg kellene-e tenned.”
Nem akarjuk korlátozni a CSS Gridet azzal, hogy olyan szintaxisba zsúfoljuk, amely korlátozza a lehetőségeit. Könnyen újra tudtuk alkotni a Bootstrap rácsot, de a CSS Grid sokkal erősebb, mint bármelyik előtte lévő rácsrendszer. Ez azért van, mert ez egy olyan web-natív megoldás, amely az alapoktól kezdve épült.
Nem vagyunk többé a balról jobbra lebegő 12 oszlopos rácsokba zárva. Szeretné az elemeket pontos helyeken elhelyezni a rácson, függetlenül a HTML-forrásuk sorrendjétől? Csak rajta! Több oszlopon és soron átívelő elemeket szeretne létrehozni? Nem probléma. Nézze meg ezt a demót, amelyet a Mozilla munkatársa, Craig Cook készített a különböző elrendezési minták bemutatására. Próbáljon meg néhány ilyen elrendezést újraalkotni a Bootstrap segítségével (tipp: nem lehetséges). Még csak a felszínét kapargatjuk annak, hogy mire képesek a CSS Grids.