CSS-Grid-Generator
Erstellen Sie CSS-Grid-Layouts visuell. Legen Sie Zeilen, Spalten und Abstände fest und kopieren Sie den fertigen CSS- und HTML-Code.
Funktionen
Anleitung
1. Legen Sie die Anzahl der Zeilen und Spalten fest.
2. Passen Sie Zeilenhöhen und Spaltenbreiten an (fr, px, auto).
3. Legen Sie den Grid-Abstand fest.
4. Kopieren Sie den generierten CSS- und HTML-Code.
Über dieses Werkzeug
CSS Grid ordnet Inhalte gleichzeitig in Zeilen und Spalten an und ist damit die natürliche Wahl für Galerien, Dashboards und Seitenstrukturen. Dieser Generator richtet einen Grid-Container visuell ein: Wählen Sie, wie viele Spalten und Zeilen Sie brauchen, den Abstand dazwischen und wie sich die Spalten den Platz teilen – gleiche Anteile mit 1fr, automatische Größe, minmax(0, 1fr), damit lange Inhalte keine Spalte sprengen, oder feste Spuren von 100px. Die Vorschau zeigt, wie die Elemente in die Spuren fließen, und das CSS wird mit repeat() kompakt und lesbar geschrieben. Kopieren Sie es als Ausgangspunkt und platzieren Sie einzelne Elemente anschließend mit grid-column und grid-row in Ihrem eigenen Stylesheet.