CSS Grid Generator
Grid-Layouts visuell erstellen — Spalten, Zeilen und Abstände konfigurieren, Elemente per Klick oder Drag zeichnen.
① Spalten & Zeilen und Track-Größen festlegen ② Zellen klicken und ziehen für Spans ③ CSS kopieren
Spalten
Zeilen
Spaltenabstand (px)
16
Zeilenabstand (px)
16
Sp.
C1
C2
C3
Ze.
R1
R2
R3
Preview
Generiertes CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}CSS Grid verwenden
CSS Grid ist ein zweidimensionales Layout-System für gleichzeitige Kontrolle über Spalten und Zeilen. Verwenden Sie fr-Einheiten für proportionale Raumaufteilung, px für feste Größen, % für relative Größen und auto zur Inhaltsanpassung. Die Eigenschaft gap fügt gleichmäßigen Abstand hinzu. Definieren Sie Grid-Elemente mit grid-column und grid-row mittels Start-/End-Liniennummern.
Häufig gestellte Fragen
CSS Grid Layout ist ein zweidimensionales Layout-System, das in Browser integriert ist. Im Gegensatz zu Flexbox (das auf einer Achse funktioniert) ermöglicht Grid die Definition expliziter Zeilen und Spalten und die präzise Platzierung von Elementen überall im Grid.
fr steht für "fractional unit" (Bruchteileinheit). Sie repräsentiert einen Bruchteil des verfügbaren Raums im Grid-Container. Beispiel: grid-template-columns: 1fr 2fr 1fr erstellt drei Spalten, wobei die mittlere doppelt so breit wie die anderen ist.
Verwenden Sie auto, wenn eine Spalte oder Zeile sich an ihren Inhalt anpassen soll. Verwenden Sie fr, um verbleibenden Raum proportional zu füllen. Kombination — z.B. auto 1fr — erstellt eine Sidebar, die sich an den Inhalt anpasst.
gap ist die Kurzform für beide. gap: 16px setzt beide gleich, gap: 16px 24px setzt row-gap zuerst. Diese ersetzen das veraltete grid-gap.
grid-column: 1 / 3 platziert ein Element von Linie 1 bis Linie 3, überspannt 2 Spalten. Alternativ überspannt grid-column: span 2 zwei Spalten ab der aktuellen Position. Dieser Generator verwendet die Start/End-Syntax.
Ja. CSS Grid wird seit 2017 in allen modernen Browsern unterstützt (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Es kann sicher in der Produktion ohne Fallbacks verwendet werden.
Dieser Generator unterstützt bis zu 12 Spalten und 8 Zeilen, was die große Mehrheit realer Layouts abdeckt. CSS selbst hat keine feste Grenze.