CSS Grid-generator
De CSS grid generator bouwt grid-lay-outs op basis van het aantal kolommen en rijen, gaps, optionele eigen grid-template-waarden en uitlijning van items, met een live preview en CSS om te kopiëren.
Over deze tool
De CSS grid generator bouwt grid-lay-outs op basis van het aantal kolommen en rijen, gaps, optionele eigen grid-template-waarden en uitlijning van items, met een live preview en CSS om te kopiëren.
Zo gebruik je het
- Stel het aantal kolommen en rijen in.
- Pas de gaps tussen kolommen en rijen aan.
- Voer eventueel eigen templates in, zoals 200px 1fr 1fr.
- Kies justify-items en align-items en klik op Copy CSS.
Goed om te weten
- De eenheid fr verdeelt de vrije ruimte: 1fr 2fr maakt de tweede kolom twee keer zo breed als de eerste.
- repeat(3, 1fr) is de verkorte schrijfwijze voor drie gelijke kolommen.
- column-gap en row-gap bepalen de tussenruimte tussen tracks.
- Grid is tweedimensionaal en regelt rijen en kolommen tegelijk.
- repeat(auto-fit, minmax(200px, 1fr)) maakt een responsive grid zonder media queries.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe maak ik een grid met 3 kolommen in CSS?
Gebruik display: grid; grid-template-columns: repeat(3, 1fr); op de container en voeg een gap toe voor tussenruimte.
Wat betekent fr in CSS Grid?
fr is een fractie van de beschikbare vrije ruimte in de grid-container.
CSS Grid of Flexbox?
Grid is het best voor tweedimensionale lay-outs zoals paginastructuren en kaartrasters; Flexbox voor eendimensionale rijen of kolommen.
Hoe maak ik een responsive grid zonder media queries?
Gebruik grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); kolommen lopen dan automatisch door zodra de ruimte dat toelaat.