CSS Grid Generator

Visueel ontwerpen met de CSS Grid Generator

De CSS Grid Generator is een interactief hulpmiddel waarmee u visueel een CSS grid-lay-out ontwerpt. Door het aantal kolommen en rijen in te stellen, de groottes te bepalen en de tussenruimtes (gaps) te specificeren, bouwt u direct de structuur van uw lay-out op. Vervolgens sleept u over de cellen om specifieke items binnen het grid te positioneren. De tool genereert automatisch de bijbehorende CSS- en HTML-code die u direct kunt kopiëren en plakken in uw eigen project.

Het ontwerpen gebeurt volledig lokaal. Je grid wordt direct in je browser opgebouwd. Niets van wat je hier instelt, wordt geüpload naar BroBroGo.

---

Technische parameters en invoerlimieten

Om een correcte lay-out te genereren, hanteert de generator specifieke invoerwaarden en limieten voor de verschillende grid-eigenschappen:

De tool ondersteunt een maximum van 16 items op het grid. Wanneer u een ongeldige waarde invoert in een invoerveld voor de track-grootte (bijvoorbeeld not-a-grid-track), wordt het invoerveld als ongeldig gemarkeerd. De gegenereerde CSS-output behoudt in dat geval de laatst geldige waarde om te voorkomen dat de code breekt.

---

Werking van de code-generatie

De generator vertaalt uw visuele ontwerp naar gestructureerde code op basis van een aantal vaste regels:

• Item-plaatsing: Door met de muis over de cellen te slepen en deze los te laten, creëert u een kind-item dat de geselecteerde kolommen en rijen beslaat. Elk getekend item krijgt een eigen grid-column en grid-row regel in de CSS en een bijbehorende div in de HTML.
• Overlapping: Items mogen elkaar overlappen. Het item dat u als laatste tekent, wordt bovenop de eerder getekende items geplaatst. U kunt een geplaatst item eenvoudig verwijderen door op de "×" te klikken.
• Code-optimalisatie met repeat(): Als opeenvolgende kolommen of rijen dezelfde grootte hebben, voegt de generator deze in de CSS-output samen met de repeat() functie. Dit houdt de code compact en overzichtelijk.
• Samenvoeging van gaps: De kolom-gap en rij-gap worden onafhankelijk van elkaar ingesteld. Indien de waarden van de kolom-gap en de rij-gap identiek zijn, worden ze in de CSS samengevoegd tot één enkele gap eigenschap.
• Beheerknopen: De knop "Items wissen" leidt tot een lege HTML-container en zet de teller op 0 items. De knop "Item toevoegen" genereert handmatig een nieuw HTML-item.

---

Vooraf ingestelde lay-outpatronen (Presets)

Voor een snelle start biedt de tool vier veelgebruikte lay-outpatronen via de presets:

1. Zijbalk: Een lay-out met een smalle zijkolom en een breder hoofdgedeelte.
2. Header & footer: Een klassieke driedelige structuur met een bovenbalk, een middengedeelte en een onderbalk.
3. Galerij: Deze preset genereert specifiek een grid van 3 kolommen, 2 rijen en 3 geplaatste items.
4. Dashboard: Een complexere indeling die geschikt is voor controlepanelen met meerdere datablokken.

---

Veelgestelde vragen (FAQ)

Hoe plaats ik items op het grid?

Klik en sleep over de cellen om een rechthoek te markeren — zodra je loslaat, wordt dit een geplaatst element dat die kolommen en rijen beslaat. Elk getekend item krijgt een eigen grid-column en grid-row regel in de CSS en een bijbehorende div in de HTML. Items mogen elkaar overlappen; het laatst getekende item ligt bovenop. Gebruik het ×-symbool op een item om het te verwijderen.

Kunnen de kolommen en rijen verschillende groottes hebben?

Ja. Elke rij of kolom heeft een eigen invoerveld voor de grootte. Je kunt daar elke geldige grid-waarde typen — zoals 1fr, 200px, auto, min-content of minmax(120px, 1fr). Rijen of kolommen met dezelfde maat worden in de code samengevoegd met repeat() om de CSS compact te houden. De kolom- en rij-gaps worden apart ingesteld en samengevoegd tot één gap-waarde als ze gelijk zijn.

Wat moet ik doen met de gegenereerde code?

Kopieer zowel de CSS als de HTML. De HTML levert de container met één div per item, en de CSS definieert het grid en positioneert elk item. Plak beide in je project om exact dezelfde lay-out te krijgen als je hier hebt getekend.