Design · Kostenlos

CSS-Grid-Generator

Erzeuge eine Rastervorschau und CSS aus Spalten, Zeilen und Abständen.

01Werte eingeben

Läuft im Browser

—

Läuft im Browser

Erzeuge eine Rastervorschau und CSS aus Spalten, Zeilen und Abständen.

Läuft im Browser

Eingaben werden auf dieser Seite verarbeitet und nicht an einen Server gesendet.

Über dieses Tool

Erstellen Sie ein CSS Grid mit gleichen Spalten und passen Sie den Code an.

Werte eingeben
Spalten · Zeilen · Abstand
Berechnen / erzeugen
Erzeuge eine Rastervorschau und CSS aus Spalten, Zeilen und Abständen.
Ergebnis
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Erstellen Sie ein CSS Grid mit gleichen Spalten und passen Sie den Code an.

Beispiel

Ergebnis

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

Wie ist das Ergebnis zu verstehen?

Erstellen Sie ein CSS Grid mit gleichen Spalten und passen Sie den Code an.

Wohin gehen meine Daten?

Die Berechnungen laufen auf Ihrem Gerät. Eingaben werden nicht an einen Server gesendet.