I marts udgav Mozilla Firefox 52, som tilføjede understøttelse af CSS Grid-layout. Hvis du ikke er bekendt med CSS Grid, er det et todimensionelt layoutsystem til internettet, som giver os mulighed for at skabe layoutmønstre nativt i browseren. Det betyder, at vi nemt kan genskabe velkendte gitre ved hjælp af blot nogle få linjer CSS. Det betyder også, at vi kan gøre en hel masse med CSS og layouts, som ikke var muligt før … men mere om det om lidt.
En kort bemærkning: Dette indlæg er ikke ment som en omfattende grundbog om CSS Grid, og det forudsætter et grundlæggende kendskab til CSS Grid. Hvis du ikke allerede har gjort det, vil jeg anbefale dig at tjekke den fantastiske CSS Grid Layout-side på MDN.
Layouts på nettet har altid været vanskelige. Da nettet først blev introduceret, var der ingen metode til layouts. Derefter kom tabeller (i tabeller, i tabeller, i tabeller, i tabeller). Det var hackish og mærkeligt, men det virkede. Da CSS blev indført i slutningen af 90’erne, kunne udviklerne begynde at bruge divs og floats til deres design og layouts. Dette førte i sidste ende til frameworks og grid-systemer, der hjalp med at give mening til alle de “gotchas” som f.eks. clearing floats, negative marginer, responsivt design og meget mere. Og sådan har tingene været i mange år nu. Der findes tusindvis af grid-systemer, men de er alle mere eller mindre ens.
Nu da CSS Grid Layout er en realitet, ville jeg se, hvad det ville kræve at erstatte en eksisterende grid-ramme med CSS Grid. Til dette eksperiment valgte jeg den populære Bootstrap-ramme.
Jeg startede med at oprette et grundlæggende websted ved hjælp af Bootstrap-grid:
Se det på CodePen.
Så lad os bryde det ned og konvertere det til at bruge CSS Grid.
I Bootstrap omslutter .container-klassen alt og indstiller breddebegrænsningerne. Den tilføjer også en padding til venstre og højre kant og centrerer alt. Der er ikke meget at ændre her. Ligesom med Bootstrap kan container-klassen være praktisk at bruge sammen med CSS Grid. Jeg genskabte den således:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Vi kan også tilføje responsive breakpoints ved at tilføje følgende:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap bruger .row-klassen til at omvikle kolonner og give en negativ margen til venstre og højre for at ophæve den padding, der tilføjes af de enkelte kolonner. Hacks som negative marginer er ikke længere nødvendige med CSS Grid, men hvis du har læst dokumentationen, ved du, at CSS Grid kræver en gridcontainer. Klassen .row er det perfekte sted til at gøre dette. Lad mig vise dig, hvad jeg gjorde, og derefter vil vi bryde det ned.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid opretter gittercontaineren.
Egenskaben grid-template-columns definerer kolonnerne til gitteret. Du kan bruge mellemrum til at definere hver enkelt kolonne individuelt, men her bruger vi gentagelsesnotationen til at definere 12 kolonner af samme størrelse. 1fr henviser til bredden af den enkelte kolonne. MDN definerer fr-enheden som en ny enhed, der “repræsenterer en brøkdel af den tilgængelige plads i gittercontaineren”. Du kan læse mere om fr-enheder på MDN. Du kan også læse mere om egenskaben grid-template-columns.
Endeligt er grid-gap-egenskaben en kortfattet egenskab, der definerer både mængden af plads mellem kolonnerne og mellem rækker af kolonner. Tænk på det som vores tagrender. Du kan læse mere om grid-gap her.
Nu er alt, hvad der er tilbage, kolonneklasserne. Bootstrap bruger kolonneklasser som .col-md-6 eller .col-lg-8 til at bestemme antallet af kolonner, som en div skal spænde over. Den sætter også div’en i flydende position og tilføjer padding til venstre og højre for at skabe riller mellem kolonnerne. Det er utrolig nemt at genskabe disse klasser takket være den korte egenskab .grid-column. Hvis vi f.eks. ønsker at genskabe .col-md-6-klassen, kan vi bruge følgende:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Enkel, ikke sandt? Ingen floats. Ingen padding. Det virker bare. grid-column-formlen angiver et emnes størrelse og placering. Vi kan bruge span til at angive, at dette bestemte element skal spænde over seks kolonner. Der er automatisk sørget for renden på grund af indpakningens grid-gap-egenskab. Du kan få mere at vide om grid-column-egenskaben her.
Så hvad sker der, når du sætter det hele sammen? Jo, webstedet ser præcis det samme ud, men vi er i stand til helt at fjerne Bootstrap-afhængigheden og bruge native CSS Grids.
Kig på det opdaterede websted på CodePen.
Denne type eksperiment er en sjov læringsøvelse, men det kan også være farligt. For at låne en replik fra den kloge filosof Jeff Goldblum:
“Du … var så optaget af, om du kunne eller ikke kunne, at du ikke stoppede op med at tænke på, om du burde.”
Vi ønsker ikke at begrænse CSS Grid ved at presse det ind i en syntaks, der vil begrænse dets potentiale. Vi var i stand til nemt at genskabe Bootstrap-gitteret, men CSS Grid er så meget mere kraftfuldt end noget gitter-system, der kom før det. Det skyldes, at det er en web-nativ løsning, der er bygget op fra bunden.
Vi er ikke længere låst fast til 12-kolonne-gitre, der flyder fra venstre til højre. Ønsker du at placere elementer på præcise steder på gitteret, uafhængigt af deres HTML-kildeorden? Så gør det. Ønsker du at oprette elementer, der spænder over flere kolonner og rækker? Det er ikke noget problem. Se denne demo, som Craig Cook fra Mozilla har lavet for at vise forskellige layoutmønstre. Prøv at genskabe nogle af disse layouts ved hjælp af Bootstrap (hint: ikke muligt). Vi er kun ved at skrabe på overfladen af, hvad CSS Grids kan gøre.