Over deze tool
CSS Grid Generator is een gratis tool die volledig in je browser draait en drie eenvoudige besturingselementen — aantal kolommen, aantal rijen en gap — omzet in een kant-en-klare CSS-grid-lay-out. Stel de waarden in, zie een live preview opnieuw tekenen, en kopieer de gegenereerde regel.
Kolommen en rijen zijn hele getallen van 1 tot 12 (standaard 3 en 2), en de gap is een schuifregelaar van 0 tot 40 pixels (standaard 10). Beide dimensies worden geschreven met repeat() en de 1fr-eenheid, zodat elk spoor de beschikbare ruimte gelijk deelt. De preview vult elke cel met een genummerd, gekleurd blok zodat je de spoorstructuur in één oogopslag kunt zien, en de uitvoer is een gewone .grid-regel met display: grid, grid-template-columns, grid-template-rows en gap. Eén klik kopieert het naar je klembord.
Alles draait volledig in je browser — geen uploads, geen accounts, geen tracking — en het blijft offline werken zodra de pagina is geladen.