Terug naar begrippenlijst
CSS Grid Layout
CSS Grid Layout, vaak kortweg CSS Grid genoemd, is een moderne methode in CSS (Cascading Style Sheets) waarmee je eenvoudig en flexibel webpagina’s kunt indelen in rijen en kolommen. In tegenstelling tot oudere technieken (zoals floats of inline-blocks), is Grid speciaal ontworpen voor layout-doeleinden. Het geeft je de controle over waar elk element precies komt te staan – en dat zonder ingewikkelde workarounds. Denk aan een soort digitaal schaakbord waarop je elk blokje precies positioneert zoals jij dat wilt.
Inhoudsopgave
Een layout als een blokkendoos
Met CSS Grid deel je je pagina op in een grid. Je bepaalt zelf hoeveel kolommen en rijen je wilt, hoe breed of hoog ze zijn, en welke content waar moet komen. Je kunt bijvoorbeeld zeggen: “de navigatie komt bovenaan, het hoofdartikel neemt drie kolommen in, en de sidebar staat helemaal rechts.”
De HTML hoeft daar nauwelijks voor aangepast te worden. Je richt de layout volledig in via CSS – overzichtelijk, schaalbaar en netjes.
Werkt als Lego, voelt als magie
CSS Grid is krachtig omdat je heel precies kunt bepalen hoe je elementen zich gedragen binnen het raster. Wil je dat een blok meerdere kolommen beslaat? Geen probleem. Wil je dat een element automatisch de beschikbare ruimte opvult? Kan ook.
Enkele dingen die je met Grid moeiteloos voor elkaar krijgt:
- Content automatisch centreren (verticaal én horizontaal!)
- Layouts die zich aanpassen aan de schermgrootte
- Complexe pagina-indelingen zonder media queries
- Elementen exact positioneren – zonder ‘hacks’ of extra divs (division)
Het voelt een beetje als Lego: je bouwt met blokken, schuift ze waar je wilt, en alles klikt netjes in elkaar.
Flexbox voor finesse, Grid voor het grote werk
Een veelgestelde vraag: wanneer gebruik je Grid en wanneer Flexbox? Kort gezegd: Grid is ideaal voor het opzetten van volledige pagina- of sectie-indelingen met rijen én kolommen. Flexbox is handiger voor lineaire layouts, dus bijvoorbeeld het uitlijnen van knoppen of het verdelen van items in één rij.
In de praktijk gebruik je ze vaak naast elkaar. Grid voor de hoofdlayout, Flexbox voor de kleinere details binnen een grid-item. Ze vullen elkaar perfect aan.
Klaar voor elk schermformaat
Een van de grote voordelen van CSS Grid is dat het uitstekend werkt in responsive design. Dankzij functies als auto-fit, minmax() en fr-eenheden, kun je layouts maken die zich automatisch aanpassen aan de beschikbare ruimte. Geen handmatig rekenen, geen media query-chaos – de grid past zich gewoon aan.
En dat maakt Grid niet alleen handig voor developers, maar ook interessant voor designers: het geeft meer vrijheid zonder in te leveren op consistentie.
Veelgestelde vragen
Nee, de basis is verrassend overzichtelijk. Als je begrijpt hoe rijen en kolommen werken, kun je al snel een complete layout opzetten.
Ja, moderne browsers zoals Chrome, Firefox, Edge en Safari ondersteunen CSS Grid volledig. Alleen oudere browsers (zoals Internet Explorer) doen niet mee.
Zeker. Grid werkt uitstekend samen met Flexbox, media queries, custom properties en andere CSS-features.
Absoluut. Juist dankzij de flexibiliteit en responsieve mogelijkheden is Grid perfect voor mobiele layouts.
Stan Classens Front-end developer
