CSS Grid Generator

Stel je kolommen en rijen in, sleep over de cellen om items te plaatsen en kopieer met één klik de grid-CSS met bijbehorende HTML.

Presets
Items
CSS
HTML
Sleep over het grid om een item te plaatsen.

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

Veelgestelde vragen

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.

CSS Cubic Bezier GeneratorSleep de twee hendels om een easingcurve te ontwerpen, zie hoe een stip de curve volgt ten opzichte van een constante snelheid en kopieer de cubic-bezier()-waarde.Flexbox GeneratorStel een flex-container en de bijbehorende items in met visuele knoppen, zie de lay-out direct reageren en kopieer de CSS met één klik.Box Shadow GeneratorSleep schuifregelaars om een box-shadow te maken, stapel lagen voor extra diepte en kopieer direct de voltooide CSS.Gradient GeneratorOntwerp een lineair, radiaal of conisch verloop, voeg kleurstops toe, bepaal de richting en kopieer direct de CSS.Border Radius GeneratorRond elke hoek af met schuifregelaars, maak organische blobs met de elliptische modus en kopieer direct de CSS.CSS clamp() CalculatorVoer een grootte in voor kleine en grote schermen en krijg een vloeiende clamp()-waarde die er prachtig tussenin schaalt — voor lettergroottes, padding, marges of gaps.