CSS Grid-generator
Bouw een CSS-raster (kolommen, rijen, gap) live en kopieer de CSS.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Een CSS-raster, live gebouwd
Kies het aantal kolommen, rijen en de gap: de voorvertoning toont de cellen in realtime en de container-CSS staat klaar om te kopiëren.
-
Stel de kolommen in
1 tot 8 gelijke tracks (1fr).
-
Stel rijen en gap in
Aantal rijen en spacing.
-
Kopieer de CSS
Pas toe op je grid-container.
De container-CSS (standaard)
| Eigenschap | Waarde |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
De eenheid 1fr verdeelt de ruimte gelijk. Voor responsiviteit vervang je door repeat(auto-fit, minmax(...)). Alles wordt lokaal gegenereerd.
Veelgestelde vragen
Wat is het verschil tussen CSS Grid en Flexbox?
Flexbox plaatst items op één as (rij of kolom); Grid werkt in twee dimensies (kolommen en rijen tegelijk). Grid is ideaal voor volledige paginalayouts, Flexbox voor eenvoudige uitlijningen.
Wat betekent repeat(3, 1fr)?
Het is een afkorting voor “3 kolommen van elk 1 fractie”. De fr-eenheid verdeelt de beschikbare ruimte gelijk. repeat(3, 1fr) maakt dus drie even brede kolommen die de container vullen.
Hoe maak ik het raster responsive?
Vervang een vast aantal door repeat(auto-fit, minmax(200px, 1fr)): kolommen passen zich automatisch aan de breedte aan. Deze tool genereert een vaste basis die je daarna kunt aanpassen.
Geldt de CSS voor de container of de cellen?
Voor de container: display: grid en de grid-template-eigenschappen bepalen de structuur. Onderliggende cellen plaatsen zichzelf in de gemaakte tracks.