Ontwerp · Gratis

CSS Grid-generator

Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.

01Voer waarden in

Werkt in je browser

—

Werkt in je browser

Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.

Werkt in je browser

Invoer wordt op deze pagina verwerkt en niet naar een server gestuurd.

Over deze tool

Maak een CSS Grid met gelijke kolommen en pas de code aan.

Voer waarden in
Kolommen · Rijen · Tussenruimte
Berekenen / maken
Maak een rastervoorbeeld en CSS met kolommen, rijen en tussenruimte.
Resultaat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Maak een CSS Grid met gelijke kolommen en pas de code aan.

Voorbeeld

Resultaat

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Hoe lees ik het resultaat?

Maak een CSS Grid met gelijke kolommen en pas de code aan.

Waar gaan mijn gegevens heen?

De berekeningen draaien op uw apparaat. Invoer wordt niet naar een server gestuurd.