In maart bracht Mozilla Firefox 52 uit, die ondersteuning voor CSS Grid Layout toevoegde. Als u niet bekend bent met CSS Grid, het is een tweedimensionale lay-out systeem voor het web dat ons in staat stelt om lay-out patronen te maken in de browser. Dit betekent dat we gemakkelijk bekende grids kunnen nabootsen met slechts een paar regels CSS. Het betekent ook dat we een heleboel kunnen doen met CSS en lay-outs dat voorheen niet mogelijk was… maar daarover zo dadelijk meer.
Een korte opmerking: Deze post is niet bedoeld als een uitgebreide inleiding voor CSS Grid, en gaat uit van een basiskennis van CSS Grid. Als u dat nog niet hebt gedaan, raad ik u aan de fantastische CSS Grid Layout-pagina op MDN te bekijken.
Lay-outs op het web zijn altijd lastig geweest. Toen het web voor het eerst werd geïntroduceerd, was er geen methode voor lay-outs. Toen kwamen er tabellen (in tabellen, in tabellen, in tabellen). Het was hackish en vreemd, maar het werkte. Toen CSS eind jaren 90 werd geïntroduceerd, konden ontwikkelaars divs en floats gaan gebruiken voor hun ontwerpen en lay-outs. Dit leidde uiteindelijk tot frameworks en grid-systemen die hielpen om alle “gotchas” te begrijpen, zoals het opruimen van floats, negatieve marges, responsive design en meer. En zo gaat het nu al jaren. Er zijn duizenden rastersystemen, maar ze zijn allemaal, min of meer, hetzelfde.
Nu CSS Grid Layout een realiteit is, wilde ik zien wat er nodig zou zijn om een bestaand rasterraamwerk te vervangen door CSS Grid. Voor dit experiment koos ik het populaire Bootstrap-framework.
Ik begon met het maken van een basissite met behulp van het Bootstrap-raster:
Bekijk het op CodePen.
Dus laten we dit afbreken en omzetten om CSS Grid te gebruiken.
In Bootstrap omwikkelt de .container-klasse alles en stelt de breedtebeperkingen in. Het voegt ook een padding toe aan de linker en rechter randen en centreert alles. Er valt hier niet veel te veranderen. Net als bij Bootstrap, kan de container klasse handig zijn om te gebruiken met CSS Grid. Ik heb het zo nagemaakt:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}We kunnen ook responsive breakpoints toevoegen door het volgende toe te voegen:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap gebruikt de .row class om kolommen te wikkelen en een negatieve marge aan de linker- en rechterkant te geven om de vulling die door individuele kolommen wordt toegevoegd teniet te doen. Hacks zoals negatieve marges zijn niet langer nodig met CSS Grid, maar als je de documentatie hebt gelezen, weet je dat CSS Grid een grid container nodig heeft. De .row klasse is de perfecte plaats om dit te doen. Ik zal u laten zien wat ik heb gedaan, en dan zullen we het uitsplitsen.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid creëert de rastercontainer.
De grid-template-columns eigenschap definieert de kolommen voor het raster. U kunt spaties gebruiken om elke kolom afzonderlijk te definiëren, maar hier gebruiken we de herhalingsnotatie om 12 kolommen van gelijke grootte te definiëren. 1fr verwijst naar de breedte van de individuele kolom. MDN definieert de fr-eenheid als een nieuwe eenheid die “een fractie van de beschikbare ruimte in de rastercontainer vertegenwoordigt”. U kunt meer lezen over fr-eenheden op MDN. U kunt ook meer lezen over de grid-template-columns property.
Ten slotte is de grid-gap property een shorthand property die zowel de hoeveelheid ruimte tussen de kolommen als tussen rijen van kolommen definieert. Zie het als onze goot. U kunt hier meer lezen over grid-gap.
Nu resteren alleen nog de kolomklassen. Bootstrap gebruikt kolomklassen zoals .col-md-6 of .col-lg-8 om het aantal kolommen te bepalen dat een div moet omvatten. Het laat de div ook zweven en voegt padding toe aan de linker- en rechterkant om een goot tussen de kolommen te maken. Het herscheppen van deze klassen is ongelooflijk eenvoudig dankzij de .grid-column shorthand eigenschap. Als we bijvoorbeeld de .col-md-6 class willen nabootsen, kunnen we het volgende gebruiken:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Eenvoudig, toch? Geen vlotters. Geen opvulling. Het werkt gewoon. De grid-column shorthand specificeert de grootte en plaats van een item. We kunnen span gebruiken om aan te geven dat dit specifieke item zes kolommen moet overspannen. Voor de goot wordt automatisch gezorgd door de eigenschap grid-gap van de wrapper. U kunt hier meer leren over de grid-column eigenschap.
En wat gebeurt er als je het allemaal samenvoegt? Nou, de website ziet er precies hetzelfde uit, maar we zijn in staat om de Bootstrap-afhankelijkheid volledig te verwijderen en native CSS Grids te gebruiken.
Bekijk de bijgewerkte website op CodePen.
Dit soort experimenten is een leuke leerschool, maar het kan ook gevaarlijk zijn. Om een regel te lenen van de wijze filosoof Jeff Goldblum:
“You … were so preoccupied with whether or not you could, you didn’t stop to think if you should.”
We willen CSS Grid niet beperken door het in een syntax te persen die het potentieel ervan beperkt. We hebben het Bootstrap-raster gemakkelijk kunnen namaken, maar CSS Grid is veel krachtiger dan alle rastersystemen die er aan vooraf zijn gegaan. Dat komt omdat het een web-native oplossing is die vanaf de grond is opgebouwd.
We zijn niet langer gebonden aan 12-koloms rasters die van links naar rechts zweven. Wilt u elementen op precieze plaatsen in het raster plaatsen, onafhankelijk van hun HTML-bronvolgorde? Ga je gang. Wilt u elementen maken die meerdere kolommen en rijen beslaan? Geen probleem. Bekijk deze demo die Craig Cook van Mozilla heeft gemaakt om verschillende opmaakpatronen te laten zien. Probeer sommige van die layouts maar eens na te maken met Bootstrap (hint: niet mogelijk). We zijn nog maar aan de oppervlakte van wat CSS Grids kunnen doen.