Flexbox zou inmiddels bij iedereen bekend moeten zijn en heeft al veel ontwikkelaars een rustige nacht bezorgd. Maar wat als je je Flexbox lay-out niet alleen verticaal maar ook horizontaal zou kunnen uitbreiden? Dit en meer is mogelijk sinds de integratie van CSS Grid.

Stel je voor dat er een manier was om je website vrij te ontwerpen in een 2-dimensionaal raster. Bijvoorbeeld door tekstblokken te maken die afbeeldingen gedeeltelijk overlappen. Of nog complexere afbeeldingsgalerijen zonder negatieve marge of positionering. Of je kunt met behulp van CSS snel paginasjablonen ontwerpen die ook responsive zijn. Voor dit alles is er een oplossing: CSS Grid.

Wat is CSS Grid?

Vergelijkbaar met Flexbox, is CSS Grid ook geïntegreerd met behulp van een container element en CSS Grid Items. Zo vinden we ook enkele eigenschappen om de Flexbox te positioneren: align-items, justify items, justify self en align-self. Deze helpen je om de inhoud van je grid overeenkomstig te positioneren.

Grofweg is CSS Grid een flexbox die 2-dimensionaal werkt:

Terwijl we met Flexbox rijen en bijbehorende kolommen alleen horizontaal kunnen bouwen, kunnen we ze met CSS Grid ook verticaal indelen:

Op het eerste gezicht lijkt CSS Grid relatief onspectaculair. Je kunt immers hetzelfde resultaat bereiken met rijen en kolommen.

Wat maakt CSS Grid zo speciaal?

Met het nieuwe gridsysteem kun je alle denkbare combinaties maken. De enige voorwaarde is dat ze rechthoekig moeten zijn. Zuivere L-vormen kun je bijvoorbeeld niet construeren.

Op deze manier kun je je gehele paginalay-out plannen en bouwen op basis van CSS Grid. Geneste grids zijn net zo goed mogelijk als de combinatie van CSS Grid en Flexbox.

Door slim te plannen, kun je nu ook je lay-outs zo programmeren dat je bijna zonder media queries kunt, maar dat hoeft natuurlijk niet. Ik zal later dieper ingaan op de verschillende mogelijkheden.

CSS Grid komt ook met een aantal andere nieuwe CSS trucs die je leven in de toekomst gemakkelijker zullen maken. Een daarvan is de nieuwe CSS unit: de zogenaamde fraction (fr). Dit werkt op dezelfde manier als het verdelen van de grootte van de Flexbox items. 

Een breuk (1fr) is een deel van een hele rij. Dus als je je grid verdeelt in 3×4, zoals in onderstaand voorbeeld uit CSS Tricks, dan is 1fr = ¼ of 25 %.

Hier duikt ook een andere bijzonderheid op: Niet alle vakjes hoeven gevuld te zijn met inhoud. Je kunt ook lege inhoud toewijzen in de CSS Grid:

W3Schools laat andere mogelijke lay-outs zien waar CSS grids geschikt voor zijn. Op die manier kunnen we gemakkelijk bepalen dat bepaalde elementen horizontaal en verticaal over een bepaald aantal vakjes moeten worden verdeeld. Boxen kunnen verschillende breedtes (kolommen) en hoogtes (rijen) hebben.

In het bovenstaande voorbeeld neemt de eerste kolom procentueel meer breedte in beslag dan de andere. Dit komt omdat de breedte niet vooraf in de CSS gedefinieerd is en daarom automatisch op de inhoud georiënteerd is. Hetzelfde zou gebeuren als we meer inhoud zouden maken dan we vooraf in de CSS hebben gedefinieerd. Dan zou de grid automatisch vergroten en de nieuwe inhoud toevoegen.

Het Duitstalige Einkaufswelten (winkelwerelden) van Shopware is gebaseerd op een CSS Grid-achtig systeem – in ieder geval in de backend-weergave. In hun WYSIWYG editor kan inhoud worden weergegeven in een raster dat op het eerste gezicht erg lijkt op de CSS Grid. In de samengestelde pagina wordt echter geen CSS Grid gebruikt, althans niet standaard.

Sinds 2017 wordt CSS Grid door bijna alle gangbare browsers ondersteund. Alleen de Internet Explorer versies vanaf 10 hebben nog het voorvoegsel ms- nodig om de CSS Grid bijna volledig te kunnen weergeven. Microsoft Edge daarentegen is al volledig geïntegreerd. Nu staat niets je nog in de weg om CSS Grid te gebruiken in je toekomstige projecten:

Hoe ziet CSS Grid er in de praktijk uit?

Zoals al aangegeven, gebruiken we de basisfunctie op een vergelijkbare manier als de flexbox. Eerst bepalen we een container waaraan we de gridfuncties toewijzen.

.container {
		display: grid;}

Er zijn vele andere waarden die je kunt toekennen om de grid naar je wens op te bouwen:

grid-template-columns, grid-template-rows en grid-template-areas (gezamenlijk kunnen deze ook allemaal worden ingesteld met grid-template). Deze eigenschappen bevatten informatie over het aantal en de grootte van de rijen en kolommen. Je kunt ook de afstanden tussen de rijen en kolommen definiëren met de eigenschappen column-gap en row-gap (of kortweg: gap).

Je hebt ook de mogelijkheid – vergelijkbaar met de flexbox – om de algemene positionering binnen de grid te bepalen. Hiervoor kun je de volgende eigenschappen gebruiken: justify-items, align-items (kort: place-items), justify-content, align-content (kort: place-content).

Met de eigenschap grid-auto-flow kun je ook bepalen in welke richting je raster moet stromen met de waarden rij, kolom of dicht. Terwijl rij en kolom zorgen voor respectievelijk de horizontale en verticale uitlijning, bepaalt dichtheid dat je raster zuinig gevuld is. Dit betekent dat met deze waarde de opstelling van je elementen binnen het raster onder bepaalde omstandigheden kan veranderen om anders lege ruimte op te vullen. Dit is een bijzonder interessante functie voor fotogalerijen. Zo schuiven elementen zo nodig op in verschillende schermformaten en ontstaan er geen visuele gaten.

Terwijl je de kolommen en rijen in de container en de afstanden ertussen definieert, gebruikt je de grid items om te bepalen waar ze zich precies in het raster moeten bevinden. 

Een afgewerkt grid zou er dan zo uit kunnen zien aan de CSS kant:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Nu je je grid container hebt gemaakt, is het tijd om deze te vullen met de grid items. Het bijzondere van het CSS gridsysteem is dat de indeling in de HTML secundair kan zijn, omdat je elk item een begin- en eindcoördinaat kunt geven. Dit wordt gedaan met grid-column-start, grid-column-end, grid-row-start, grid-row-end.

De coördinaten wijzen naar de gridlijnen en tellen van links naar rechts, of van boven naar beneden. Deze kunnen ook worden afgekort als grid-colomn  en  grid-row. 

Gevorderden kunnen ook grid-area gebruiken om deze velden in één keer alle coördinaten te geven of een naam toe te kennen aan het grid item, waarvan je dan zelf de plaatsing in de grid container kunt bepalen. Maar je kunt niet alleen de grid items een naam geven. Het is ook mogelijk om namen toe te kennen aan de rasterlijnen, zodat je de rasterpunten hun coördinaten kunt meedelen met behulp van deze namen. Zo hoef je niet door het grid te tellen.

Ook het gebruik van negatieve waarden, of tellen van links naar rechts, van onder naar boven zijn mogelijk. Deze zijn echter interessanter voor gevorderde gebruikers van de CSS Grid en kunnen hier in detail worden gelezen:

• Naming Grid Lines

• Naming Grid Areas

Ten slotte heb je ook de mogelijkheid om de positionering van de inhoud binnen de grid items individueel te bepalen. Dit wordt gedaan met de eigenschappen: justify-self en align-self (in het kort: place-self).

Een grid item in CSS zou er zo uit kunnen zien:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Grid row-end en grid-column-end kunnen ook worden gebruikt met "span +n". Hier bespaar je jezelf het vervelende tellen van regels. "Span 2" zegt tegen het item dat het zich over twee rastervelden moet uitstrekken. Gedetailleerde uitleg van de individuele eigenschappen is te vinden in de CSS Tricks Guide.

Voorbeelden op het internet

Als je een visueel type bent zoals ik, moet je een aantal voorbeelden uit het echte leven zien om de CSS Grid volledig te begrijpen. Ik heb wat rondgesnuffeld op het internet om sites te vinden die gemaakt zijn met CSS Grid, of die voordeel zouden kunnen hebben van het gebruik ervan.

Levon Biss gebruikte de CSS Grid als een implementatietool om zijn portfolio te creëren. Als je zijn site nader bekijkt met het onderzoeksgereedschap, zul je zien dat de site is opgebouwd met geneste gridsystemen. Eerst werd de pagina in drie secties verdeeld: header, main en footer. De hoogte voor de header en de footer werd vooraf bepaald, terwijl het hoofdgedeelte flexibel kan meegroeien met de inhoud met de waarde "auto". De kolommen werden ingesteld op de volledige beschikbare breedte met 1fr.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

De hoofdzaak van zijn site was weer verpakt in een gridsysteem. Merk op hoe de CSS eenheden px en fr hier zijn gemengd. Op deze manier heeft de rand een vaste breedte van 144px, terwijl het middelste deel flexibel blijft.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Tenslotte werd ook de galerij nog eens genest. Voorheen werden geen waarden gegeven voor de grid gaps. Voor de galerij zijn deze nu ingesteld op 1em. Dit bespaart het toevoegen van marge tussen de afbeeldingen. Je kunt de tussenruimten dus eenmalig in het document instellen. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Een andere speciale eigenschap van CSS Grid is de repeat() functie. Dit is een verkorte notatie voor het herhalen van waarden. 

Repeat() neemt de reeks te creëren waarden als de eerste waarde en de grootte als de tweede waarde. Uitgeschreven, zou dit er als volgt uitzien:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

In dit voorbeeld is geen CSS grid gebruikt. Zoals in het vorige voorbeeld hadden we de grid kunnen nesten of een marge kunnen toevoegen aan de gridcontainer voor de buitenste spatiëring.

Zo zou de Grid verdeling eruit kunnen zien: 

Een mogelijke benadering van CSS kan er als volgt uitzien:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Hoewel de hele Larq website baat zou kunnen hebben bij het CSS Grid, heb ik slechts een klein gebied geselecteerd ter illustratie. Juist hier wordt het voordeel van een tweedimensionaal raster zeer duidelijk.

Zo zou de verdeling van de grid items eruit kunnen zien:

Een mogelijke benadering van CSS kan er als volgt uitzien:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

CSS Grid en WordPress verenigen

Met de nieuwe WordPress editor kan inhoud nu ook standaard in rijen en kolommen worden weergegeven. De lay-out doet me echter meer denken aan bijvoorbeeld Bootstrap en ik mis de tweedimensionaliteit een beetje. Dat dachten anderen waarschijnlijk ook en daarom ontwikkelden zij de plugin Grids: Layout builder for WordPress. De plugin is gratis en doet precies wat het belooft: het stelt je in staat om CSS grids visueel te maken zonder gebruik te hoeven maken van een page builder.

Het bijzondere van CSS Grid is de mogelijkheid van overlapping zonder negatieve marge of absolute positionering te gebruiken. Dit is precies wat mogelijk is met deze plugin. Met behulp van de z-index en ook door de ordening in de grid zelf (het laatste element staat bovenaan, het eerste onderaan) kunnen hiërarchieën worden weergegeven.

Het bovenstaande voorbeeld zou er als website zo uit kunnen zien:

CSS Grid en @media query

CSS Grid kan natuurlijk vrij worden gebruikt met Flexbox en Media Query. Er is echter nog een nieuwe functie die CSS Grid mintroduceert: minmax()

Zoals de naam al doet vermoeden, gaat het hier om minimum- en maximumwaarden. Je kunt dit gebruiken in verband met de kolommen. In tegenstelling tot Media Query wordt hier niet de schermgrootte opgevraagd, maar de grootte van het element. Als de box zo sterk krimpt dat hij onder de minimumgrootte komt, vergroten en verplaatsen de elementen zich zodat hij weer past.

Minmax() werkt in combinatie met auto-fit en kan er als volgt uitzien:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Hier worden kolommen aangemaakt met een minimumgrootte van 240px, maar een maximumgrootte van 1fr. In dit voorbeeld komt 1fr overeen met de volledige breedte van de grid. Hierdoor kunnen meerdere grid-items naast elkaar staan als er ruimte is, maar wordt de hele breedte gebruikt als er niet genoeg ruimte is.

Maar er zijn ook voordelen in verband met de media query. Met behulp van de coördinaten kun je je grid-items voor elk apparaat anders plaatsen en rangschikken. Vooral op mobiel, waar een andere hiërarchie kan heersen dan op de desktop, kan dit een aangename gebruikerservaring opleveren.

Alle speciale functies in een oogopslag

• FR (fractie) als nieuwe CSS eenheid

• Grid Areas en lines kunnen namen krijgen

• Grid-column-end kan gebruikt worden met "span n"

• Zet Grid uitlijning op "dense" om lege ruimtes te vullen met elementen

• Geef dezelfde columns of rows aan met repeat()

• Responsieve weergave met behulp van minmax() + auto-fit/auto-fill

• Grid-items kunnen willekeurig worden gerangschikt (ook overlappend) in het raster

Verdere informatiebronnen over dit onderwerp

• Een complete gids voor CSS Grid door CSS Tricks
• Een gids voor het leren van CSS Grid van Learn CSS Grid
• Alles wat je nodig hebt om CSS Grid te leren van Grid by Example
• Test je vaardigheden: Grid Layout van MDN Web Docs
• Leer spelenderwijs alle functies van CSS Grid met CSS Grid Garden