Maaliskuussa Mozilla julkaisi Firefox 52:n, joka lisäsi tuen CSS Grid-asettelulle. Jos CSS Grid ei ole sinulle tuttu, se on kaksiulotteinen layout-järjestelmä webille, jonka avulla voimme luoda layout-kuvioita natiivisti selaimessa. Tämä tarkoittaa, että voimme helposti luoda tuttuja ruudukkoja vain muutamalla CSS-rivillä. Se tarkoittaa myös sitä, että voimme tehdä CSS:llä ja asettelulla paljon sellaista, mikä ei ollut ennen mahdollista… mutta siitä lisää myöhemmin.
Pikahuomautus: Tämän postauksen ei ole tarkoitus olla kattava CSS Gridin peruskurssi, ja se edellyttää CSS Gridin perustuntemusta. Jos et ole vielä tutustunut, suosittelen tutustumaan fantastiseen CSS Grid Layout -sivuun MDN:ssä.
Webin asettelut ovat aina olleet hankalia. Kun web otettiin ensimmäisen kerran käyttöön, asetteluja varten ei ollut mitään menetelmää. Sitten tulivat taulukot (taulukoissa, taulukoissa, taulukoissa). Se oli hakkerointia ja outoa, mutta se toimi. Kun CSS otettiin käyttöön 90-luvun lopulla, kehittäjät pystyivät käyttämään div- ja float-merkkejä muotoilussaan ja asettelussaan. Tämä johti lopulta kehyksiin ja ruudukkojärjestelmiin, jotka auttoivat ymmärtämään kaikki ”hankaluudet”, kuten floattien tyhjentämisen, negatiiviset marginaalit, responsiivisen suunnittelun ja paljon muuta. Ja näin asiat ovat olleet jo vuosia. Grid-järjestelmiä on tuhansia, mutta ne ovat kaikki enemmän tai vähemmän samanlaisia.
Nyt kun CSS Grid Layout on todellisuutta, halusin nähdä, mitä vaatisi olemassa olevan grid-kehyksen korvaaminen CSS Gridillä. Tähän kokeiluun valitsin suositun Bootstrap-kehyksen.
Aloitin luomalla perussivuston Bootstrap-ruudukon avulla:
Katsele sitä CodePenissä.
Kerrotaan tämä ja muunnetaan se käyttämään CSS-ruudukkoa.
Bootstrapissa .container-luokka kietoo kaiken ympärilleen ja asettaa leveysrajoitukset. Se lisää myös pehmusteen vasempaan ja oikeaan reunaan ja keskittää kaiken. Tässä ei ole paljon muutettavaa. Aivan kuten Bootstrapissa, container-luokka voi olla kätevä käyttää CSS Gridin kanssa. Loin sen uudelleen näin:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Voidaan myös lisätä responsiivisia katkaisupisteitä lisäämällä seuraavat:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap käyttää .row-luokkaa sarakkeiden käärimiseen ja negatiivisen marginaalin antamiseen vasemmalle ja oikealle mitätöimään yksittäisten sarakkeiden lisäämät pehmusteet. Negatiivisten marginaalien kaltaisia hakkerointeja ei enää tarvita CSS Gridin kanssa, mutta jos olet lukenut dokumentaation, tiedät, että CSS Grid vaatii grid-säiliön. .row-luokka on täydellinen paikka tehdä tämä. Näytän sinulle, mitä tein, ja sitten puramme sen.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid luo ruudukkosäiliön.
Ominaisuus grid-template-columns määrittelee ruudukon sarakkeet. Voit määritellä jokaisen sarakkeen erikseen välilyönneillä, mutta tässä hyödynnämme toistomerkintää määritelläksemme 12 samankokoista saraketta. 1fr viittaa yksittäisen sarakkeen leveyteen. MDN määrittelee fr-yksikön uudeksi yksiköksi, joka ”edustaa murto-osaa grid-säiliön käytettävissä olevasta tilasta”. Voit lukea lisää fr-yksiköistä MDN:stä. Voit myös lukea lisää grid-template-columns -ominaisuudesta.
Loppujen lopuksi grid-gap-ominaisuus on lyhennelmäominaisuus, joka määrittelee sekä sarakkeiden välisen että sarakkeiden rivien välisen tilan määrän. Ajattele sitä kouruna. Voit lukea lisää grid-gapista täältä.
Nyt jäljellä ovat enää sarakeluokat. Bootstrap käyttää sarakeluokkia, kuten .col-md-6 tai .col-lg-8, määrittääkseen, kuinka monta saraketta div:n tulisi kattaa. Se myös kelluttaa div:n ja lisää pehmusteita vasemmalle ja oikealle luodakseen kouruja sarakkeiden väliin. Näiden luokkien luominen uudelleen on uskomattoman helppoa .grid-column-lyhennelmäominaisuuden ansiosta. Jos esimerkiksi haluaisimme luoda uudelleen .col-md-6-luokan, voimme käyttää seuraavaa:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Yksinkertaista, eikö? Ei kellukkeita. Ei pehmusteita. Se vain toimii. Lyhenne grid-column määrittää elementin koon ja sijainnin. Voimme käyttää span osoittaaksemme, että tämän tietyn kohteen tulisi kattaa kuusi saraketta. Sisäkehästä huolehditaan automaattisesti Wrapper-ominaisuuden grid-gap ansiosta. Lisätietoa grid-column-ominaisuudesta saat täältä.
Mitä tapahtuu, kun laitat kaiken yhteen? No, sivusto näyttää täsmälleen samalta, mutta pystymme poistamaan Bootstrap-riippuvuuden kokonaan ja käyttämään natiiveja CSS-verkkoja.
Katso päivitetty sivusto CodePenistä.
Tämmöinen kokeilu on hauska oppimisharjoitus, mutta se voi olla myös vaarallinen. Lainatakseni viisaan filosofin Jeff Goldblumin repliikkiä:
”Sinä … olit niin huolissasi siitä, voisitko vai et, ettet pysähtynyt miettimään, pitäisikö sinun ajatella.”
Emmekä halua rajoittaa CSS Gridiä sullomalla sen syntaksiin, joka rajoittaa sen mahdollisuuksia. Pystyimme helposti luomaan Bootstrapin ruudukon uudelleen, mutta CSS Grid on niin paljon tehokkaampi kuin mikään sitä edeltänyt ruudukkojärjestelmä. Tämä johtuu siitä, että se on alusta asti rakennettu web-native-ratkaisu.
Meidät ei ole enää lukittu 12-sarakkeisiin ruudukkoihin, jotka kelluvat vasemmalta oikealle. Haluatko sijoittaa elementit täsmällisiin paikkoihin ruudukossa niiden HTML-lähdejärjestyksestä riippumatta? Siitä vain. Haluatko luoda elementtejä, jotka kattavat useita sarakkeita ja rivejä? Se ei ole ongelma. Katso tätä Mozillan Craig Cookin luomaa demoa, jossa esitellään erilaisia asettelumalleja. Yritä luoda joitakin näistä asetteluista uudelleen Bootstrapilla (vihje: ei mahdollista). Olemme vasta raapaisemassa pintaa siitä, mitä CSS Grids voi tehdä.