CSS Grid-generator
Ontwerp je CSS Grid visueel — pas kolommen, rijen en tussenruimte aan, maak gebieden en kopieer de code
Rastervoorbeeld
Gegenereerde CSS
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}Zo gebruik je de CSS Grid-generator
Ontwerp complexe rasters door waarden aan te passen en cellen als gebieden te selecteren. Kopieer daarna de CSS rechtstreeks naar je project.
Stel kolommen en rijen in
Kies het aantal kolommen en rijen met de numerieke velden.
Stel formaten en tussenruimte in
Bepaal breedtes en hoogtes met elke CSS-eenheid (fr, px, %, auto enz.) en stel de tussenruimte in.
Klik om gebieden te selecteren
Klik op cellen om ze als benoemde rastergebieden te markeren. Elke selectie wordt een apart gebied.
Kopieer de code
Klik op ‘Code kopiëren’ en plak de gegenereerde CSS in je stylesheet.
Waarom onze CSS Grid-generator?
Ontwerp visueel, bekijk je lay-out realtime en kopieer productieklare code met één klik.
Visueel ontwerpen met klikken
Bekijk je raster terwijl je bouwt en klik cellen aan voor benoemde gebieden; je hoeft grid-template-areas niet te visualiseren.
Flexibele eenheden
Gebruik elke geldige CSS-eenheid: fr, px, %, em, rem, auto, minmax(), repeat() en meer.
Direct code genereren
Krijg meteen productieklare CSS zonder handmatig coderen of syntaxfouten.
Rastergebieden benoemen
Selecteer cellen en laat de generator grid-template-areas schrijven voor leesbare, onderhoudbare CSS.