Skip to main content

CSS-Grid-Generator

CSS-Grid-Layouts visuell erstellen mit Live-Vorschau. Funktioniert als Grid-System-Generator und HTML-Grid-Generator.

Geprüft von · Zuletzt geprüft

1
2
3
4
5
6
7
8
9
3
3
10px
10px
Content Areas

No content areas defined. Add an area to create spanning cells.

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Ein Grid erstellen

  1. Spalten- und Zeilenanzahl mit Schiebereglern einstellen, oder ein benutzerdefiniertes Template wie 1fr 2fr 1fr oder repeat(3, minmax(200px, 1fr)) direkt in die Template-Felder eingeben. Die Texteingaben akzeptieren jeden gültigen grid-template-columns/grid-template-rows-Wert.
  2. Spalten- und Zeilenabstände konfigurieren. Diese werden auf die column-gap- und row-gap-Eigenschaften abgebildet - pixel-genauer Weißraum zwischen Tracks ohne Margin zu einzelnen Zellen hinzuzufügen.
  3. Auf "+ Bereich hinzufügen" klicken, um eine benannte Region mit dem grid-template-areas-System zu definieren. Jeder Bereich erstreckt sich von seiner Spalten/Zeilen-Startlinie bis zu seiner Spalten/Zeilen-Endlinie.
  4. Bereichsgrenzen auf der Vorschau ziehen, um anzupassen, welche Linien jede Region berührt, oder Liniennummern direkt eingeben.
  5. CSS kopieren. Die Ausgabe enthält die vollständige Grid-Container-Deklaration plus Pro-Bereich-grid-area-Regeln, bereit für dein Stylesheet.

Wie der Grid-Layout-Algorithmus läuft

CSS-Grid kommt aus dem CSS-Grid-Layout-Module-Level-1 und ist das einzige zweidimensionale Layout-System, das in CSS eingebaut ist. Wenn display: grid gesetzt wird, führt der Browser einen Track-Sizing-Algorithmus aus, der die Template-Werte in konkrete Pixelgrößen für jede Spalte und Zeile umwandelt. Der Algorithmus durchläuft drei Phasen: zuerst löst er Festlängen-Tracks (Pixel, em), dann verteilt er den verbleibenden Platz proportional auf fr-Einheits-Tracks, und schließlich dimensioniert er automatisch alle auto- oder min-content/max-content-Tracks basierend auf ihren Inhalten.

Die fr-Einheit ist das, was Grid natürlich anfühlen lässt: ein fr entspricht einem Bruchteilanteil des verbleibenden Platzes nach dem Abzug der festen Tracks. grid-template-columns: 200px 1fr 2fr auf einem 1000px-Container wird zur Laufzeit zu "200px, 267px, 533px". minmax(200px, 1fr) gibt einem Track eine Mindestgröße von 200px, die nur dann auf seinen Anteil anwächst, wenn Platz vorhanden ist. All dies läuft während des Layouts, nicht des Paintings, sodass der Browser die berechneten Track-Größen cached und den Algorithmus nur dann erneut ausführt, wenn sich Containergröße, Template oder Inhaltsmaße ändern.

Typische echte Verwendungszwecke für Grid

  • Seitenlevel-Layouts mit Kopfzeile, Seitenleiste, Hauptinhalt und Fußzeile als benannte Bereiche.
  • Responsive Karten-Galerien mit grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) - Karten fließen und skalieren ohne Media-Queries.
  • Formular-Layouts, bei denen Labels und Eingaben über Zeilen mit grid-template-columns: auto 1fr ausgerichtet sind.
  • Dashboard-Panels mit Widgets, die mehrere Zellen umspannen, jeweils positioniert mit grid-column/grid-row-Kurzschrift.
  • Foto-Mosaike mit gemischten Hoch- und Querformat-Zellen durch grid-auto-flow: dense, um Lücken rückwärts zu füllen.
  • Magazin-ähnliche redaktionelle Grids, bei denen benannte Bereiche einen bewussten, nicht-uniformen Lesefluss vorantreiben.

Randfälle und Fallstricke

  • Implizite vs. explizite Tracks. Wenn ein Element bei grid-row: 10 platziert wird, aber nur 3 explizite Zeilen definiert sind, erstellt der Browser 7 implizite Zeilen der grid-auto-rows-Größe - standardmäßig auto. Das kann null-hohe Tracks erzeugen, die wie Layout-Fehler aussehen. Immer grid-auto-rows: minmax(50px, auto) als Sicherheitsboden setzen.
  • Liniennummern zählen ab 1, nicht 0. Ein 3-Spalten-Grid hat Linien 1, 2, 3, 4. grid-column: 1 / 4 umspannt alle drei Spalten. Off-by-one-Fehler sind die häufigste Quelle der Grid-Frustration.
  • Benannte Bereiche müssen Rechtecke bilden. grid-template-areas-Strings werden in eine 2D-Matrix geparst, und jeder L-förmige oder nicht verbundene Bereichsname wird still ignoriert. Das ASCII-Art sorgfältig validieren.
  • Abstände zählen nicht als Linien. Der Abstand wird zwischen Tracks gerendert, fügt aber keine Liniennummern hinzu, sodass die Element-Positionierungs-Mathematik sauber bleibt.
  • Prozentsätze in Abständen lösen sich gegen die Containergröße auf, nicht den Inhalt. gap: 5% auf einem 1000px-Container ergibt 50px Abstände - nützlich für proportionalen Abstand, manchmal überraschend, wenn der Container fließend ist.
  • Grid-Elemente können überlappen durch explizite Platzierung - zwei Elemente im selben grid-area stapeln sich, und z-index steuert die Reihenfolge. Das ist eine Funktion (für geschichtete Layouts), kein Fehler, aber es überrascht Menschen, die Flexbox-ähnliche Kollisionsvermeidung erwarten.
  • Subgrid hat begrenzte Unterstützung. grid-template-columns: subgrid lässt verschachtelte Grids Tracks von einem übergeordneten Grid erben. Firefox hat es in 71 (2019) eingebaut; Chrome wartete bis Version 117 (2023); Safari holte in 16 auf. caniuse.com/css-subgrid prüfen, bevor darauf verlass wird.

Hintergrund zur Spezifikation (Grid-System-Generator und HTML-Grid-Generator)

CSS-Grid-Layout-Module-Level-1 wurde 2017 als W3C-Candidate-Recommendation veröffentlicht, nach jahrelanger Spezifikationsarbeit von Microsofts Bo Cupp und Rachel Andrew. Level 2 fügte Subgrid hinzu; Level 3 fügt Mosaik-ähnliche Auto-Platzierung hinzu, die derzeit hinter Flags ausgeliefert wird. Grid wurde als Ergänzung zu Flexbox entwickelt: Flex verarbeitet eindimensionale Layouts, Grid zweidimensionale. Die fr-Einheit, benannte Bereiche und die auto-fit/auto-fill-Schlüsselwörter sind alle Grid-spezifisch. Browser-Kompatibilität gemäß caniuse.com/css-grid liegt über 98% weltweit - Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+ - Grid ist also produktionssicher überall außer in alten eingebetteten Browsern.

Grid vs Flexbox vs Tabellen

Grid, Flex und HTML-Tabellen ordnen alle Inhalte in Zeilen und Spalten an, beantworten aber unterschiedliche Fragen. Grid ist content-out: ein Track-Skelett wird definiert und Elemente in bestimmte Zellen gelegt, was maximale Kontrolle über die Ausrichtung auf beiden Achsen gibt. Flexbox ist content-in: eine Reihe oder Spalte von Elementen handelt Größen basierend auf Inhalt aus. Flex ist perfekt für Navigationsleisten, Schaltflächengruppen und Werkzeugleisten; Grid ist perfekt für Seitenlayouts und mehrachsige Ausrichtungen. HTML-Tabellen bleiben das richtige Werkzeug für tabellarische Daten - sortierbare Spalten, Zellbeziehungen, die Screen-Reader ansagen. Im Vergleich zu Bootstraps 12-Spalten-Grid oder Tailwinds grid-cols-*-Dienstprogrammen gibt das Schreiben von rohem CSS-Grid beliebige Templates und benannte Bereiche, die Dienstprogrammklassen schwer ausdrücken können. Für einfache Karten-Layouts ist ein Framework in Ordnung; für alles Maßgeschneiderte ist natives Grid-CSS wartbarer.

Häufig gestellte Fragen

Was bedeutet die fr-Einheit tatsächlich?

Fraction-Einheit. Ein <code>fr</code> stellt einen gleichen Anteil des verbleibenden Platzes im Grid-Container dar, nachdem alle Festlängen-Tracks, Abstände und intrinsisch dimensionierten Tracks abgezogen wurden. In <code>grid-template-columns: 100px 1fr 2fr</code> mit einem 700px-Container nimmt der 100px-Track seinen Anteil, und die restlichen 600px werden 1:2 zwischen den beiden <code>fr</code>-Tracks geteilt (200px und 400px). Die <code>fr</code>-Einheit ist grid-exklusiv - sie hat außerhalb eines Grid-Containers keine Bedeutung.

Wann sollte ich grid-template-areas vs. linienbasierte Platzierung verwenden?

Benannte Bereiche sind am besten für Top-Level-Seitenlayouts geeignet, wo die Struktur als ASCII-Grid leicht visualisiert werden kann: Kopfzeile, Seitenleiste, Hauptinhalt, Fußzeile. Linienbasierte Platzierung (<code>grid-column: 2 / 5</code>) ist besser für detaillierte Komponentenlayouts, wo präzise Spannen, überlappende Elemente oder dynamische Positionierung benötigt werden. Benannte Bereiche machen die Absicht für zukünftige Leser offensichtlich; linienbasierte Platzierung gibt mathematische Kontrolle. Beides im selben Stylesheet verwenden - sie stehen nicht im Konflikt.

Wie unterscheiden sich Grid und Flexbox in der Praxis?

Flexbox ordnet Elemente entlang einer einzigen Achse (Zeile oder Spalte) an und lässt sie Größen basierend auf Inhalt aushandeln. Grid ordnet Elemente in einer zweidimensionalen Track-Struktur an, wo das Skelett zuerst definiert wird. Flex ist inhaltsgesteuert (die Elemente formen den Container); Grid ist containergesteuert (der Container formt die Elemente). Für eine Navigationsleiste ist Flex richtig. Für ein gesamtes Seitenlayout mit Kopfzeile, Seitenleiste und Hauptinhalt ist Grid richtig. Sie kombinieren sich sauber: ein Grid-Container mit Flex-Kindern innerhalb jeder Zelle ist ein sehr häufiges Muster.

Was ist auto-fit vs auto-fill für responsive Grids?

Beide erstellen so viele Tracks wie in den Container passen. <code>auto-fill</code> behält leere Tracks am Ende (Elemente bleiben bei ihrer Mindestgröße, auch wenn überschüssiger Platz vorhanden ist). <code>auto-fit</code> kollabiert leere Tracks und dehnt die gefüllten aus, um den vollen Platz zu nutzen. Für ein Karten-Grid mit <code>minmax(240px, 1fr)</code> erzeugt <code>auto-fit</code> vollbreite Karten, wenn nur wenige Elemente vorhanden sind, während <code>auto-fill</code> sie bei 240px lässt und den zusätzlichen Platz als Abstand verteilt.

Kommuniziert dieser Generator mit einem Server?

Nein. Spalten- und Zeilen-Templates, Abstandswerte, Bereichsdefinitionen und jede andere Konfiguration leben lokal im Komponentenzustand. Die CSS-Ausgabe wird mit Template-Literalen innerhalb der Preact-Komponente erstellt, und die Vorschau rendert mit Inline-Stilen, die auf DOM-Knoten angewendet werden. Es gibt keinen API-Aufruf, der mit deiner Grid-Konfiguration verbunden ist.

Was ist subgrid und wann sollte es verwendet werden?

Subgrid lässt ein verschachteltes Grid die Track-Definitionen von seinem übergeordneten Grid erben, sodass Kind-Grids ihre Spalten oder Zeilen an den Linien des übergeordneten Grids ausrichten. <code>grid-template-columns: subgrid</code> auf dem verschachtelten Grid deklarieren. Die Browser-Unterstützung kam spät (Firefox 71, Safari 16, Chrome 117), also caniuse.com/css-subgrid prüfen, bevor es in der Produktion verwendet wird.

Wie erstelle ich ein responsives Grid ohne Media-Queries?

<code>repeat()</code>, <code>auto-fit</code> (oder <code>auto-fill</code>) und <code>minmax()</code> kombinieren: <code>grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))</code>. Elemente sind mindestens 240px breit und dehnen sich aus, um verfügbaren Platz zu teilen; der Browser passt die Spaltenanzahl automatisch an, wenn sich der Container ändert. Diese eine Deklaration ersetzt eine Handvoll Media-Queries für Karten-Galerie-Layouts.

Was verursacht seltsame leere Zeilen in meinem Grid?

In der Regel implizite Tracks. Wenn du ein Element mit <code>grid-row: 5</code> platzierst, aber nur 3 explizite Zeilen definiert hast, generiert der Browser 2 implizite Zeilen, um Zeile 5 zu erreichen, jede dimensioniert durch <code>grid-auto-rows</code> (Standard <code>auto</code>, was bedeutet, sie nehmen die Höhe ihres Inhalts - oft null für leere Zeilen). Setze <code>grid-auto-rows: minmax(auto, max-content)</code> oder verwende Named-Area-Templates.

Ist das dasselbe wie ein HTML-Grid-Generator oder ein Grid-System-Generator?

Ja. "HTML-Grid-Generator", "Grid-System-Generator", "Grid-Generator-CSS" und "Grid-Generator" sind alle gängige Weisen, nach einem Werkzeug zu suchen, das <code>display: grid</code>-CSS für einen HTML-Container schreibt. Diese Seite deckt jede Variante ab: Es gibt eine auf Standards basierende CSS-Grid-Deklaration plus optionale <code>grid-template-areas</code> aus. Wenn ein vorgefertigtes 12-Spalten- System wie Bootstrap oder ein Utility-first-Framework wie Tailwind gewünscht wird, sind diese auf nativem CSS-Grid aufgebaut - hier starten, wenn direkte Kontrolle ohne Framework-Overhead gewünscht wird.

Verwandte Tools

Mehr CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool
ZeroUtil unterstützen