TL
Tool Lab
💰Spenden
💰Spenden

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Über dieses Tool

Der CSS-Grid-Layout-Generator ermöglicht es, zweidimensionale Grid-Layouts visuell zu gestalten, indem grid-template-columns, grid-template-rows, Gap-Eigenschaften und Ausrichtungseinstellungen angepasst werden. Die Live-Vorschau zeigt genau, wie das Grid aussieht.

CSS Grid ist das mächtigste Layout-System in CSS, für zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig) konzipiert. Es ergänzt Flexbox, das eindimensionale Layouts verwaltet.

Anleitung

  1. grid-template-columns für die Spaltenstruktur festlegen. Preset-Schaltflächen für gängige Muster nutzen.
  2. Optional grid-template-rows einstellen (für die meisten Layouts bei auto lassen).
  3. column-gap und row-gap für den Abstand anpassen.
  4. justify-items und align-items zur Steuerung der Elementplatzierung in Zellen verwenden.
  5. Elementanzahl mit dem Schieberegler ändern, um die Grid-Reaktion zu sehen.
  6. Auf Kopieren klicken, um das generierte CSS zu kopieren.

Anwendungsfälle

Front-End-Entwickler nutzen CSS Grid für Seitenlayouts, Dashboard-Strukturen und Bildgalerien. Designer exportieren Grid-Spezifikationen als exaktes CSS für Entwickler. Design-System-Teams verwenden es für das Prototyping von Abstands- und Spaltenmustern.

Häufige Fragen

  • Was bedeutet 1fr? — fr ist eine Brucheinheit. 1fr bedeutet ein Bruchteil des verfügbaren Platzes. repeat(3, 1fr) erstellt drei gleiche Spalten.
  • Wann Grid und wann Flexbox verwenden? — Grid für zweidimensionale Layouts (Zeilen und Spalten) nutzen. Flexbox für das Anordnen von Elementen in einer Richtung.
  • Wird CSS Grid von allen Browsern unterstützt? — Ja. CSS Grid wird seit 2017 vollständig von allen modernen Browsern unterstützt.