Wat is het verschil tussen grid en flexbox?
Het verschil tussen grid en flexbox zit in het aantal richtingen. Grid regelt rijen en kolommen tegelijk. Flexbox regelt er één: een rij of een kolom.
Ze zijn geen concurrenten. In vrijwel elke site gebruik je ze naast elkaar.
De keuze volgt uit wat je nodig hebt.
Wanneer grid
Bij een pagina-indeling waar dingen zowel horizontaal als verticaal moeten uitlijnen. Een overzicht met kaarten, een dashboard, een productraster.
Je bepaalt vooraf het raster en plaatst de onderdelen erin. Meer daarover lees je bij css.
Wanneer flexbox
Bij een rij onderdelen die de beschikbare ruimte moeten verdelen. Een menubalk, een knoppenrij, een kaart met een icoon naast tekst.
De onderdelen bepalen dan zelf hoeveel ruimte ze nemen.
De praktische vuistregel
Weet je vooraf hoe je raster eruitziet? Grid. Wil je dat onderdelen zich naar elkaar schikken? Flexbox.
Bij twijfel is flexbox eenvoudiger om te beginnen. Meer daarover lees je bij framework.
Mijn vuistregels
- Pagina-indeling: grid.
- Rij of kolom onderdelen: flexbox.
- Gebruik ze gerust in elkaar; dat is de normale situatie.
- Gebruik geen tabellen voor indeling.
Die laatste komt op oudere sites nog voor en levert problemen op bij voorleessoftware.
Wat je als opdrachtgever hiermee moet
Weinig, behalve de termen herkennen als je bouwer ze gebruikt. Het is een keuze binnen zijn vak.
Wat je wel merkt is het resultaat: een indeling die netjes meebeweegt met het scherm.
Wat ze allebei vervangen hebben
De oude manier met zwevende blokken en tabellen. Die was foutgevoelig en werkte slecht op kleine schermen.
Meer daarover lees je bij hoe een grid zich aanpast op mobiel.