CSS Grid

Datum: 25-09-2017 | Ruud van Eldik

Voorheen dachten we in traditionele eendimensionale weblay-outs, waarin we heel veel controle over de horizontale opmaak hadden, maar stukken minder over de verticale. Met CSS Grid kregen we veel meer mogelijkheden voor het opmaken van echt tweedimensionale pagina’s, met een aanzienlijk eenvoudigere en meer semantische markup.

 

CSS GridHelaas blijft CSS Grid voorlopig nog toekomstmuziek voor productiewebsites. Ondanks de grote sprong voorwaarts die het door de gezamenlijke ondersteuning van Firefox, Safari en Chrome heeft gekregen, wordt CSS Grid slechts door iets meer dan 60% van de browsers ondersteund. Daar zijn twee oorzaken voor aan te wijzen: de eerste is Microsofts browser Edge die de nieuwe techniek nog niet ondersteunt en de tweede, en belangrijkere oorzaak, is de grote verspreiding van oudere smartphones en tablets die de techniek niet ondersteunen en die maar langzaam vervangen worden (bron: www.caniuse.com).

Toen men in de opensource-community van Zurb begon te praten over het gebruik van CSS Grid in het Foundation-framework, moesten zelfs de grootste fans toegeven dat het waarschijnlijk pas vanaf medio 2018 in productieprojecten gebruikt zal worden. Het was net alsof je voor het raam van de winkel al wel naar lekkere snoepjes mocht kijken, maar ze pas volgend jaar mocht eten. CSS Grid had laten zien wat er mogelijk was met een echt tweedimensionale opmaak, dus de community wilde daar gewoon snel mee aan de slag. Toen de Foundation-community de mogelijkheden van grid begon te verkennen, realiseerden we ons dat de nieuwe technieken een enorme hoeveelheid onbenutte mogelijkheden boden.

Flexbox wordt bijvoorbeeld al veel gebruikt, maar er zijn geen of nauwelijks grids die de mogelijkheden voor het verticaal opmaken even goed benutten als voor het horizontaal opmaken. Met Flexbox is het super eenvoudig om elementen verticaal te centreren en de grootte ervan automatisch aan te passen. Bovendien kunnen ontwikkelaars hun ‘denkrichting’ van horizontaal naar verticaal en weer terug switchen. Met Flexbox verandert hun wereld van een die uit vakken en lijnen bestaat naar een die uit vectoren bestaat waar ze een x- of y-richting aan kunnen toewijzen, waarmee tekst automatisch omloopt en elementen nauwkeurig gepositioneerd kunnen worden.

Nauwkeurig positionioren

Met de calc()-functie van CSS3 kun je elementen net als met Flexbox nauwkeurig op hun plaats zetten. Omdat je er ingewikkelde margin-based grids mee kunt maken, hoef je niet te worstelen met de uitdagingen van padding-based grids, die nog gemeengoed zijn bij CSS-frameworks. Met calc kun je rekenen met CSS-eigenschappen, verschillende lengte-eenheden zoals % en rem met elkaar combineren en grids maken waarbij je de verhoudingen tussen de elementen aangeeft.

Het nieuwe XY Grid in Foundation 6.4 benut de voordelen van beide om een super eenvoudige tweedimensionale grid te maken met een nauwkeurige controle over zowel padding als margin. Dit grid is eenvoudig te begrijpen, makkelijk te gebruiken en het ontwikkelen van ingewikkelde tweedimensionale lay-outs gaat er veel sneller mee. Het mooiste van XY Grid is dat het gebaseerd is op technieken als calc en Flexbox, die door meer dan 95 procent van de browsers worden ondersteund. Hierdoor is het XY Grid van Zurb nu al bruikbaar in productieprojecten.

XY Grid maakt gebruik van Flexbox om je in staat te stellen de cellen van een grid in verticale of horizontale richting te bewerken. Omdat Flexbox in vectoren denkt, heeft elk element van een grid een richting die x (horizontaal) of y (verticaal) is. Door deze horizontale en verticale componenten naadloos te nesten, kun je heel makkelijk tweedimensionale lay-outs maken. Daarna stel je de margin en de padding van de cellen in je grid nauwkeurig in met calc. Zo aap je in feite de mogelijkheden na die CSS Grid heeft voor het opvullen van ruimtes tussen rijen en kolommen.

Dat is niet het enige vernuftige: door de introductie van een grid-’frame’ kun je je grid met XY Grid op een vaste positie in de viewport fixeren voor bijvoorbeeld headers, footers en andere elementen. Je kunt er ook elementen mee maken die onafhankelijk van de rest van de pagina scrollen.

Grids zijn weer hot

Na jaren waarin relatief weinig gebeurde, zijn grids weer hot. CSS Grid gebruikt de krachtigste lay-out-engine ter wereld en maakt die tien keer zo krachtig. Omdat de beperkingen van de huidige technieken opgeheven worden en je je ontwerpen voortaan echt in meerdere richtingen kunt maken, verwacht ik daar een enorme opbloei van innovatieve nieuwe lay-outs van. Steeds meer ontwikkelaars en browsers zullen de specificatie omarmen. Met de volgende grote versie van Foundation kunnen ontwikkelaars de mogelijkheden van CSS Grid nog beter benutten. Daar hoef je echter niet op te wachten, want dankzij de nieuwe Foundation XY Grid – die gebaseerd is op de wijdverspreide Flexbox en calc – kun je nu al eenvoudig grids ontwikkelen voor morgen.

“CSS Grid biedt meer mogelijkheden voor het maken van tweedimensionale pagina’s, met een veel eenvoudigere en meer semantische markup”

Affiliates

Een goeie tip van brad Hassley is om een resources page te maken, van bijvoorbeeld de gebruikte productie tools. De resources kunnen als affiliates dienen, en inkomsten genereren. Ook in de footer is daar ruimte voor. Bijvoorbeeld in de vorm van partners.

Contact

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam rem, nesciunt saepe.

Follow us