CSS Grid: praktische gids voor moderne lay-outs

CSS Grid is de krachtigste manier om webpagina's in te delen op een tweedimensionaal systeem van rijen en kolommen. Na jaren worstelen met float, tabellen en fragiele negatieve marges maakte Grid het eindelijk mogelijk om verticale en horizontale plaatsing tegelijk te sturen door een paar regels op een container te schrijven. In deze gids gaan we stap voor stap te werk, van de kernbegrippen tot het bouwen van een echt paginaskelet.

Waarom verschilt Grid van Flexbox?

Beide zijn moderne lay-outhulpmiddelen, maar ze zijn voor verschillende taken ontworpen. Flexbox is eendimensionaal: het lijnt items uit langs één rij of één kolom. CSS Grid is tweedimensionaal: het definieert rijen en kolommen samen, zodat je een item precies in de gewenste cel kunt plaatsen op beide assen.

• Flexbox: stromen langs één as, zoals een navigatiebalk, een knoppengroep of de inhoud binnen een kaart.
• Grid: echt tabelachtige structuren zoals een paginaskelet, een galerij, een dashboard of een kaartenraster.

In de praktijk gebruik je ze samen: Grid voor het buitenste skelet, Flexbox binnen de kaarten.

Je eerste grid: rij- en kolomsjablonen

Wanneer je een element display: grid geeft, wordt het een grid-container en worden de directe kinderen grid-items. Kolommen definieer je met grid-template-columns en rijen met grid-template-rows:

.galerij {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

Deze code maakt drie vaste kolommen met 16px ruimte ertussen. Maar vaste pixelwaarden zijn niet flexibel. Hier komt mijn favoriete Grid-eenheid in beeld: fr (de fractie-eenheid). fr verdeelt de beschikbare ruimte in verhoudingen:

.galerij {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Nu delen de drie kolommen de beschikbare breedte gelijk. Had je 2fr 1fr 1fr geschreven, dan zou de eerste kolom twee keer zo breed zijn als de andere.

repeat(), minmax() en echte flexibiliteit

In plaats van dezelfde waarde steeds opnieuw te schrijven, gebruik je de functie repeat(). minmax() geeft een kolom een onder- en bovengrens. Combineer beide en je krijgt een responsief raster:

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

Deze ene regel is opmerkelijk krachtig. Met auto-fit berekent de browser hoeveel kolommen er op het scherm passen terwijl elke kolom minstens 220px breed blijft, en verdeelt vervolgens de resterende ruimte gelijkmatig dankzij 1fr. Het resultaat: een kaartenraster dat vier kolommen toont op een breed scherm, twee op een tablet en één op een telefoon, zonder ook maar één media query.

Het verschil tussen auto-fit en auto-fill is subtiel: auto-fit laat lege tracks inklappen en rekt de bestaande items uit, terwijl auto-fill de onzichtbare lege kolommen behoudt. Voor de meeste kaartlay-outs voelt auto-fit natuurlijker aan.

Een paginaskelet met benoemde gebieden

De best leesbare functie van Grid is grid-template-areas. Je beschrijft de lay-out bijna als een ASCII-tekening:

.pagina {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "zijbalk kop"
    "zijbalk inhoud"
    "zijbalk voet";
  min-height: 100vh;
  gap: 16px;
}

.pagina header  { grid-area: kop; }
.pagina aside   { grid-area: zijbalk; }
.pagina main    { grid-area: inhoud; }
.pagina footer  { grid-area: voet; }

Dit bouwt een klassieke applicatielay-out: een zijbalk met vaste breedte links, en een kop, inhoud en voettekst gestapeld rechts. Om op mobiel naar één kolom te schakelen, hoef je alleen het sjabloon opnieuw te definiëren:

@media (max-width: 760px) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kop"
      "inhoud"
      "voet"
      "zijbalk";
  }
}

Zonder de HTML aan te raken hebben we de zijbalk onderaan geplaatst, enkel door het sjabloon te wijzigen. Precies dat onderhoudsgemak maakt Grid zo sterk.

Items plaatsen met lijnnummers

De rasterlijnen zijn genummerd vanaf 1. Met grid-column en grid-row bepaal je hoeveel kolommen of rijen een item beslaat:

.uitgelicht {
  grid-column: 1 / 3;   /* van lijn 1 tot lijn 3: beslaat twee kolommen */
  grid-row: 1 / 2;
}

Het sleutelwoord span is leesbaarder: grid-column: span 2; zegt een item om vanaf zijn positie twee kolommen te beslaan. Om cellen uit te lijnen gebruik je justify-items (horizontaal) en align-items (verticaal); om één item apart uit te lijnen zijn er justify-self en align-self.

Veelgemaakte fouten

• Grid voor alles gebruiken: een menu van één regel blijft eenvoudiger met Flexbox.
• Vaste hoogtes instellen: laat rijen op auto staan en laat ze met de inhoud meegroeien.
• margin in plaats van gap gebruiken: de gap-eigenschap van Grid beheert tussenruimtes consistent zonder over de randen te lopen.
• auto-fit / auto-fill verwarren: zie je onverwachte lege kolommen, dan heb je waarschijnlijk de verkeerde gekozen.

Veelgestelde vragen

Welke browsers ondersteunen CSS Grid?

Alle moderne browsers (Chrome, Firefox, Safari, Edge) ondersteunen CSS Grid al jaren volledig. Afgezien van het verouderde Internet Explorer is er praktisch geen compatibiliteitszorg meer, dus je kunt het gerust in productie gebruiken bij hedendaagse projecten.

Moet ik Grid of Flexbox gebruiken?

Schik je inhoud op twee assen (zowel rijen als kolommen), kies dan Grid; lijn je iets op één as uit, gebruik dan Flexbox. In de meeste echte projecten nestelen ze samen: Grid voor het buitenste skelet, Flexbox voor de uitlijning binnen componenten.

Is de fr-eenheid beter dan percentages?

Meestal wel. fr verdeelt de resterende ruimte en houdt automatisch rekening met de gap-tussenruimtes, terwijl je bij percentages de gaten zelf moet aftrekken. Daardoor is fr een veiligere en schonere keuze voor verhoudingen binnen een grid.

Heb je een snelle, responsieve, op Grid gebaseerde interface nodig voor je project? Ik bouw nette, onderhoudbare lay-outs met moderne CSS. Neem contact op om je idee te bespreken.