CSS Grid Generator
Live preview
Waarom een visuele CSS Grid generator gebruiken?
CSS Grid is het krachtigste lay-outsysteem in CSS, maar de syntaxis — grid-template-columns, grid-template-rows, fr-eenheden, minmax(), repeat() — heeft een steile leercurve. Onze visuele generator laat je het raster configureren via schuifregelaars en dropdowns en het lay-out direct zien bijwerken, zodat je het effect van elke eigenschap begrijpt zonder in de MDN-documentatie te hoeven duiken.
Live rasterpreview
Zie je raster in realtime bijwerken terwijl je kolommen, rijen, afstand en uitlijning aanpast
Ondersteuning voor fr-eenheden
Sjablonen gebruiken fractionele eenheden (fr) voor flexibele responsieve rasters die zich aanpassen aan de containergrootte
Gebruiksklare CSS-output
Exporteert een schoon .container CSS-blok met grid-template-columns, rows, gap en align-items
Een CSS Grid-lay-out maken
Stel kolommen en rijen in
Gebruik de schuifregelaars om het aantal kolommen en rijen van je raster te definiëren
Kies sjabloon en afstand
Selecteer een kolomsjabloon (gelijk, vast+flex, responsief minmax) en pas de tussenruimte aan
CSS kopiëren
Klik op 'CSS kopiëren' voor het volledige CSS-blok klaar om in je stijlblad te plakken
CSS Grid-gebruiksscenario's
Paginalay-outs
Bouw koptekst/zijbalk/hoofdinhoud/voettekst-structuren schoon met benoemde rastergebieden
Dashboards
Maak complexe dashboard-lay-outs met kaarten van verschillende groottes via grid-column en grid-row spans
Afbeeldingsgalerijen
Bouw metselwerk- of uniforme afbeeldingsgalerijen met auto-fill en minmax voor responsiviteit
Tijdschriftlay-outs
Maak redactionele lay-outs met asymmetrische kolommen en uitgelichte elementen die meerdere cellen beslaan
CSS Grid best practices
✓ Geef de voorkeur aan fr-eenheden boven percentages
De fr-eenheid (fractioneel) distribueert de beschikbare ruimte na vaste kolommen, waarbij je het handmatig berekenen van percentages voor flexibele kolommen vermijdt.
✓ Gebruik minmax() voor responsieve rasters
repeat(auto-fill, minmax(250px, 1fr)) maakt een responsief raster dat het aantal kolommen automatisch aanpast — zonder mediaquery's.
✓ Gebruik benoemde rastergebieden
grid-template-areas met benoemde cellen (header, sidebar, main, footer) maakt paginalay-outs leesbaar en gemakkelijk aan te passen.
✓ Begrijp auto-fill vs auto-fit
auto-fill maakt zoveel mogelijk banen aan (met lege banen over). auto-fit klapt lege banen in en vergroot bestaande items — doorgaans beter voor kaartenrasters.
❓ Veelgestelde vragen
Wat is een fr-eenheid in CSS Grid?
fr staat voor 'fractionele eenheid'. 1fr vertegenwoordigt een fractie van de beschikbare vrije ruimte in de rastercontainer. repeat(3, 1fr) maakt 3 gelijke kolommen die alle beschikbare ruimte gelijkelijk verdelen.
Hoe verschilt CSS Grid van Flexbox?
Flexbox is eendimensionaal — het rangschikt items langs één as (rij of kolom). CSS Grid is tweedimensionaal — het beheert rijen en kolommen tegelijk, waardoor het veel krachtiger is voor paginalay-outs.
Wat doet minmax()?
minmax(min, max) definieert een maatbereik voor een rasterbaan. minmax(200px, 1fr) betekent dat een kolom minimaal 200px breed is maar kan groeien om de beschikbare ruimte te vullen — ideaal voor responsieve rasters.
Wanneer CSS Grid gebruiken in plaats van Flexbox?
Gebruik Grid voor 2D-lay-outs waarbij je gelijktijdig rijen en kolommen wilt beheren. Gebruik Flexbox voor 1D-componentlay-outs zoals navigatiebalken en formulierrijen. De meeste moderne lay-outs gebruiken beide.