CSS-rastergenerator

Definieer kolommen, rijen en gaten visueel en kopieer vervolgens de CSS-rastersjablooncode voor uw lay-out.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

Definieer kolommen, rijen en gaten visueel en kopieer vervolgens de CSS-rastersjablooncode.
Draait in uw browser
Gratis te gebruiken

Hoe te gebruiken

Stel het aantal kolommen en rijen in.
Stem de afstand en spoorgrootte af.
Kopieer de raster-CSS.

How this tool works

Stel het aantal kolommen en rijen in.
Stem de afstand en spoorgrootte af.
Kopieer de raster-CSS.

Recommended settings

Gebruik eerst de standaardopties en pas deze indien nodig aan

Supported formats

Text / on-page input

File size and limits

Zeer complexe voorvertoningen met meerdere lagen kunnen op oudere telefoons langzamer aanvoelen.

Privacy

Kleur- en CSS-generatoren draaien volledig in uw browser. Previews en conversies uploaden nooit uw stijlen.

Common use cases

Gebruik CSS Grid Generator wanneer u maar wilt: definieer kolommen, rijen en gaten visueel en kopieer vervolgens de CSS Grid-sjablooncode.

Troubleshooting

Het voorbeeld ziet er anders uit na het plakken

Controleer of er concurrerende CSS op uw pagina aanwezig is (resets, overgenomen kleuren). Kopieer de gegenereerde regel eerst naar een geïsoleerd stylesheet.

FAQ

Uploadt dit mijn CSS?

Nee. Generatoren en converters worden in uw browser uitgevoerd met live preview.

Heb ik een account nodig?

Nee. Open de tool, pas de besturingselementen aan en kopieer de CSS.

Gerelateerde tools

Flexbox Generator

Experiment with flex direction, wrap, justify, and align — see layouts update live.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool