Was bedeutet die fr-Einheit im Grid Track Sizing?

Die fr-Einheit stellt einen Bruchteil des Freiraums im Gitterbehälter dar. Mit repeat(3, 1fr) werden drei Spalten mit gleicher Breite erstellt, die sich den verfügbaren Platz teilen und sich entsprechend erweitern und schrumpfen, wenn sich der Container verändert.

Wann sollte ich minmax() anstelle von fr verwenden?

Verwenden Sie minmax(), wenn Spuren sowohl einen Boden als auch eine Decke benötigen, z. B. minmax(80px, 1fr), wodurch eine Spalte mindestens 80px breit bleibt, sie jedoch wachsen kann, um den Platz zu füllen. Plain fr hat kein Minimum und kann auf kleinen Bildschirmen unter lesbare Breiten schrumpfen.

CSS Grid Generator

Erstellen Sie ein CSS-Raster-Layout visuell - legen Sie Spalten, Zeilen, Lücken und Trackgrößen fest und kopieren Sie dann das generierte CSS.

Columns

Rows

Track sizing

column-gap

row-gap

justify-itemsalign-items

Preview

CSS

Was this tool helpful?

Send output to:

How to use CSS Grid Generator

Legen Sie die Anzahl der Spalten und Zeilen für das Raster fest.
Wählen Sie eine Spurmaßeinheit wie fr, px, auto oder minmax.
Passen Sie die Spalten- und Zeilen-Lücke sowie die Beleg- und Align-Items an.
Kopieren Sie das generierte Raster-CSS und fügen Sie es in Ihr Projekt ein.

Was ist CSS-Grid-Generator?

Dieses Tool ist ein interaktiver Spielplatz für zweidimensionale CSS-Gitterlayouts. Wenn Sie display: grid deklarieren, können Sie Inhalte gleichzeitig in Zeilen und Spalten anordnen, und dieser Generator erstellt die Trackdefinitionen für Sie.

Wählen Sie, wie viele Spalten und Zeilen Sie möchten, wählen Sie eine Trackgrößeneinheit wie flexible fr-Einheiten, feste Pixel, auto oder einen responsiven minmax()-Bereich aus und fügen Spalten- und Zeilenlücken hinzu. Das Update für nummerierte Zellen wird in einem echten Raster live angezeigt, und die Ausgabe verwendet repeat() für sauberes, lesbares CSS, das Sie in Ihr Stylesheet kopieren können. Es läuft alles lokal in Ihrem Browser.

FAQ

Was bedeutet die fr-Einheit im Grid Track Sizing?: Die fr-Einheit stellt einen Bruchteil des Freiraums im Gitterbehälter dar. Mit repeat(3, 1fr) werden drei Spalten mit gleicher Breite erstellt, die sich den verfügbaren Platz teilen und sich entsprechend erweitern und schrumpfen, wenn sich der Container verändert.
Wann sollte ich minmax() anstelle von fr verwenden?: Verwenden Sie minmax(), wenn Spuren sowohl einen Boden als auch eine Decke benötigen, z. B. minmax(80px, 1fr), wodurch eine Spalte mindestens 80px breit bleibt, sie jedoch wachsen kann, um den Platz zu füllen. Plain fr hat kein Minimum und kann auf kleinen Bildschirmen unter lesbare Breiten schrumpfen.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Grid Generator on Wikipedia·Developer Tools on Wikipedia·CSS Grid Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Grid Generator

Something went wrong

How to use CSS Grid Generator

Was ist CSS-Grid-Generator?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts