Tokenlabor

CSS-Grid-Generator mit Vorschau

CSS-Grid-Generator: Spalten, Zeilen, fr-Einheit, auto-fit und Abstände einstellen, das Grid-Layout live ansehen und den CSS-Code kopieren.

Vorschau
CSS-Code

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Grid-Layout mit CSS Grid

Der CSS-Grid-Generator erstellt ein Grid-Layout aus Spalten, Zeilen und Abständen und zeigt es in einer Vorschau. Sie legen fest, wie viele Spalten es geben soll und wie breit sie sind, oder tragen eine eigene Vorlage ein wie 200px 1fr 2fr. Der Generator prüft eigene Vorlagen mit dem Browser und meldet, wenn ein Wert nicht gültig ist.

Kern jedes Grids ist grid-template-columns. Die fr-Einheit steht für einen Anteil am freien Platz: 1fr 2fr gibt der zweiten Spalte doppelt so viel Raum wie der ersten. repeat(3, 1fr) ist die Kurzform für drei gleich breite Spalten. Für responsive Layouts ohne Media Queries eignet sich repeat(auto-fit, minmax(160px, 1fr)): Der Browser setzt so viele Spalten nebeneinander, wie bei mindestens 160 Pixel Breite hineinpassen, und verteilt den Rest gleichmäßig. Bei auto-fit werden leere Spalten zusammengeschoben, bei auto-fill bleiben sie als leere Spuren stehen.

Ein häufiger Stolperstein: 1fr hat als Mindestbreite die Breite des Inhalts. Lange Wörter, Tabellen oder Codezeilen können eine Spalte deshalb breiter machen als geplant. minmax(0, 1fr) erlaubt der Spalte, schmaler als ihr Inhalt zu werden. Elemente können sich über mehrere Spalten erstrecken, etwa mit grid-column: span 2.

Anleitung: CSS-Grid-Generator in 4 Schritten

  1. Zahl der Spalten und die Spaltenbreite wählen, etwa 1fr oder minmax(0, 1fr), oder eine eigene Spaltenvorlage wie 200px 1fr 2fr eintragen.
  2. Zeilen und Zeilenhöhe festlegen und Spalten- sowie Zeilenabstand in Pixeln angeben.
  3. justify-items und align-items einstellen; für ein responsives Raster „Responsiv: so viele Spalten wie passen (auto-fit)“ mit Mindestbreite einschalten.
  4. Die Vorschau prüfen, bei Bedarf das erste Element über 2 Spalten ziehen und den CSS-Code kopieren.

Typische Anwendungsfälle

  • Kachelraster für Produkte oder Artikel, das sich ohne Media Queries an die Bildschirmbreite anpasst.
  • Seitenlayout mit fester Seitenleiste und flexiblem Inhaltsbereich, etwa 240px 1fr.
  • Dashboard mit einer großen Hauptkachel, die sich über zwei Spalten erstreckt.
  • Formular mit Beschriftung und Eingabefeld in zwei Spalten nebeneinander.
Fragen

Häufige Fragen

Was bedeutet die fr-Einheit?

fr steht für fraction, also Anteil. Der freie Platz im Grid wird im Verhältnis der fr-Werte aufgeteilt. Bei 1fr 1fr 2fr bekommt die dritte Spalte die Hälfte, die anderen je ein Viertel.

Was ist der Unterschied zwischen auto-fit und auto-fill?

Beide setzen so viele Spalten wie hineinpassen. Sind weniger Elemente da als Spalten, lässt auto-fill leere Spalten stehen, auto-fit schiebt sie zusammen und die vorhandenen Elemente werden breiter.

Grid oder Flexbox?

Grid ordnet in zwei Richtungen zugleich an, also in Zeilen und Spalten, etwa für Seitenlayouts oder Kachelraster. Flexbox ist für eine Richtung gedacht, etwa eine Menüleiste. Beide lassen sich kombinieren.

Warum wird meine Spalte breiter als 1fr?

1fr hat als Mindestbreite die Inhaltsbreite. Ein langes Wort oder ein breites Bild drückt die Spalte deshalb auseinander. Schreiben Sie minmax(0, 1fr) statt 1fr, dann bleibt die Aufteilung gleichmäßig.

Wie zentriere ich ein Element mit CSS Grid?

Am Container display: grid und place-items: center setzen. Das zentriert den Inhalt waagerecht und senkrecht; im Generator entspricht das justify-items und align-items auf center.

Wie mache ich ein Grid-Layout responsiv?

Mit grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)). Der Browser setzt so viele Spalten, wie bei der Mindestbreite passen, und bricht auf schmalen Bildschirmen von selbst um. Alternativ ändern Sie die Spaltenzahl per Media Query.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen