# CSS-Grid-Layout-Generator

> Zeige Grid-Spalten und -Abstände in der Vorschau an und kopiere CSS.

[Open tool](https://www.toolcabana.com/de/css-grid-layout-generator) · [Design und CSS](https://www.toolcabana.com/de/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: de. Description language: de. Complete guide translation: yes.

## Overview (en)

CSS grid layout generator writes grid CSS from a column count, row count and gap, and previews numbered cells. Choose 1 to 12 columns and 1 to 12 rows with a 0 to 100 px gap; columns use repeat(n, minmax(0, 1fr)) so they share the width equally, and rows size automatically. Download the rules as a .grid class in grid.css.

## Supported tasks (de)

Zeige Grid-Spalten und -Abstände in der Vorschau an und kopiere CSS.

## Steps (de)

1. Gib die angeforderten Werte im Einstellungsbereich ein.
2. Lege Spalten, Zeilen und Abstand (px) fest.
3. Führe den CSS-Grid-Layout-Generator aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.

## Settings

- Spalten (de; key: columns; type: number); minimum: 1; maximum: 12
- Zeilen (de; key: rows; type: number); minimum: 1; maximum: 12
- Abstand (px) (de; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (de)

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Privacy and connections (de)

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

## Questions (de)

### Why does the grid use minmax(0, 1fr) instead of 1fr?

A plain 1fr track has an automatic minimum, so long words or wide content can stretch a column. minmax(0, 1fr) lets columns shrink below their content width, keeping all columns equal. The generator applies it to every column.

### Can I make grid columns of different widths with this generator?

No. It produces equal-width columns with repeat() and rows set to auto height. For uneven tracks, copy the CSS and edit grid-template-columns by hand, for example to 2fr 1fr.

### What does the grid CSS download contain?

grid.css contains a .grid selector with display: grid, the column and row templates and the gap. Add the class to your container element, or copy just the declarations from the text output into an existing rule.

### Wo wird meine Eingabe verarbeitet?

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

### Welche Eingabelimits gelten?

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/de/css-clamp-calculator)
- [CSS flexbox playground](https://www.toolcabana.com/de/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/de/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/de/css-clip-path-maker)