Druk op Ctrl+D om deze pagina als bladwijzer op te slaan
CSS Grid-generator is een gratis online tool waarmee je grid-indelingen visueel ontwerpt.
Hoe gebruik je CSS Grid generator?
Stel het aantal rijen en kolommen in.
Sleep cellen om gebieden samen te voegen of de plaatsing aan te passen.
Kopieer de gegenereerde CSS Grid-code en gebruik die in je project.
Veelgestelde vragen over CSS Grid generator
Wat is het verschil tussen CSS Grid en Flexbox?
CSS Grid is voor 2D-indelingen (rijen + kolommen), terwijl Flexbox voor 1D-indelingen is (rij of kolom). Grid is beter geschikt voor complexe pagina-indelingen.
Wat is de fr-eenheid?
fr (fraction) is een proportionele eenheid die in CSS Grid wordt gebruikt. Zo verdeelt 1fr 2fr de ruimte in een verhouding van 1:2. Heel handig voor responsieve indelingen.
Kan ik een responsief raster maken zonder media queries?
Ja. Met repeat(auto-fit, minmax(240px, 1fr)) leg je alleen de minimale kolombreedte vast en laat je de rest aan de browser: kolommen komen erbij als het venster groeit en verdwijnen als het krimpt, van telefoon tot desktop zonder één breakpoint. Let op: auto-fill laat lege sporen achter in de resterende ruimte terwijl auto-fit de bestaande uitrekt om die te vullen, waardoor beide verschillen bij weinig items.
Een lang woord rekt een rasterkolom op en breekt mijn lay-out.
Rasteritems hebben standaard een minimumgrootte van auto, waardoor ze weigeren kleiner te worden dan hun inhoud — één lange URL of een onbreekbaar woord duwt de hele kolom open. min-width: 0 op dat item geeft het raster de ruimte om het weer te laten krimpen, en overflow-wrap: anywhere laat de lange reeks afbreken. De track definiëren als minmax(0, 1fr) in plaats van kaal 1fr haalt de oorzaak meteen weg, en daarom is dat zo gangbaar.
Tips om CSS Grid generator effectief te gebruiken
repeat(auto-fit, minmax(240px, 1fr)) herschikt zichzelf, helemaal zonder media queries.
Gebruik gap in plaats van marges zodat de laatste kolom geen losse ruimte overhoudt.
Benoem bij complexe layouts de gebieden met grid-template-areas; dat blijft leesbaar.