CSS Grid Generator
Deze css grid generator helpt je om snel en visueel een CSS grid lay-out te ontwerpen. Stel het aantal kolommen, rijen en de tussenruimte in, sleep vakken op het scherm om gebieden te maken en kopieer direct de schone code. De tool werkt volledig in je browser zonder account of installatie.
Hoe werkt de CSS grid generator online
Met de CSS Grid Generator stel je binnen enkele stappen een complete grid-structuur samen:
- Pas de schuifregelaars voor Kolommen en Rijen aan (elk van 1 tot 24) en stel de Tussenruimte in tussen 0 en 128 pixels.
- Klik op een cel in het raster en sleep naar de tegenoverliggende hoek om een zone te tekenen.
- Pas eventueel de naam van het gebied aan in de lijst bij Gebieden.
- Klik op het vak CSS of HTML, of op de knop Kopiëren, om de gegenereerde code op je klembord te plaatsen.
Rasterzones tekenen met grid-template-areas
Elke zone die je tekent krijgt automatisch een naam zoals area-1 of area-2. In de lijst bij Gebieden kun je deze hernoemen naar duidelijke namen zoals header, sidebar of main. Ingevoerde namen worden automatisch opgeschoond tot geldige CSS-namen met kleine letters, cijfers, koppeltekens en underscores.
Gebieden moeten rechthoekig zijn en mogen elkaar niet overlappen. Als een getrokken selectie een bestaand gebied raakt, kleurt het vak rood en wordt de zone niet aangemaakt. Je kunt een gebied wissen met het prullenbak-icoon om de cellen weer vrij te maken.
Trackmaten en geavanceerde instellingen
Standaard worden kolommen en rijen verdeeld in gelijke delen met repeat(3, 1fr). Open het paneel Geavanceerde afmetingen om voor elke kolom of rij afzonderlijk een specifieke maat in te stellen.
Geldige eenheden zijn onder meer 1fr, 240px, 25%, auto, min-content, max-content, minmax(100px, 1fr) en fit-content(300px). Als een invoerveld geen geldige CSS bevat, kleurt het veld rood en valt de code automatisch terug op 1fr.
Responsieve lay-outs met CSS grid
De gegenereerde code is standaard CSS zonder externe bibliotheken of frameworks. Om een lay-out flexibel te maken voor verschillende schermformaten, kun je relatieve eenheden zoals fr en minmax() combineren met media queries.
Door binnen een media query de eigenschap grid-template-areas te herdefiniëren, kun je op smalle schermen de gebieden onder elkaar stapelen in één enkele kolom.
Veelgestelde vragen
Wat is een CSS grid generator?
Een CSS grid generator is een visuele tool die automatisch CSS Grid-code en HTML genereert op basis van jouw ontwerp. Je stelt het aantal kolommen, rijen en de tussenruimte in, waarna je zones tekent in de browser. Dit bespaart het handmatig uittellen van rijen en kolommen.
Hoe gebruik ik grid-template-areas in CSS?
Je gebruikt grid-template-areas door elke zone in je lay-out een naam te geven en het raster per rij als tekstreeksen tussen quotes te noteren. Elk kindelement krijgt vervolgens de eigenschap grid-area met de bijbehorende naam. Deze generator schrijft zowel de sjabloontekst als de afzonderlijke grid-area regels automatisch.
Wat betekent de fr-eenheid in CSS grid?
De fr-eenheid staat voor een evenredig deel van de resterende vrije ruimte in de grid container nadat vaste maten en tussenruimtes zijn afgetrokken. Een kolom met 2fr krijgt dubbel zoveel beschikbare ruimte als een kolom met 1fr. Via "Geavanceerde afmetingen" kun je eigen fr-waarden opgeven.
Wat doet minmax() in een grid lay-out?
De functie minmax(min, max) definieert een trackgrootte die niet kleiner wordt dan de minimale waarde en niet groter dan de maximale waarde. Zo zorgt minmax(100px, 1fr) ervoor dat een kolom minimaal 100px breed is en meegroeit met de resterende ruimte. Je kunt deze functie rechtstreeks invullen bij de trackinstellingen.
Hoe voeg ik tussenruimte toe tussen kolommen en rijen?
Tussenruimte voeg je toe met de eigenschap gap op de grid container, bijvoorbeeld gap: 16px. Dit plaatst gelijke ruimte tussen alle rijen en kolommen, maar niet aan de buitenranden. Met de schuifregelaar "Tussenruimte" stel je dit in van 0 tot 128px.
Is de gegenereerde CSS-code geschikt voor mobiele apparaten?
Ja, de gegenereerde code is schone CSS die je eenvoudig responsief kunt maken met media queries en flexibele eenheden. Omdat er geen externe software of bibliotheken nodig zijn, kun je de code direct aanpassen voor elk schermformaat.
Slaat deze online tool mijn gegevens of ontwerpen op op een server?
Nee, deze tool werkt volledig lokaal in je browser en uploadt geen gegevens naar een server. Er is geen registratie of account nodig om de generator te gebruiken.
Aanbevolen
-
Web Design Sketchbook (dot grid wireframe)Schets je layout eerst op papier voordat je de grid-code opbouwt.
-
CSS: The Definitive Guide (Meyer & Weyl)Het naslagwerk dat elke grid-eigenschap in je code helder uitlegt.
-
15,6" Draagbare Monitor (USB-C)Houd het resultaat op een tweede scherm terwijl je aan de grid sleutelt.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
