CSS-Grid-Spielplatz Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

🎨

CSS-Grid-Spielplatz

Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

Rasterstruktur definieren

Legen Sie die Anzahl der Spalten und Zeilen fest oder geben Sie benutzerdefinierte Template-Werte ein.

Abstände und Ausrichtung anpassen

Steuerung von Spalten- und Zeilenabständen sowie Festlegung von justify-items und align-items.

CSS kopieren

Vorschau der Rasterlayout und Kopie des CSS-Codes.

Loading tool...

What Is CSS-Grid-Spielplatz?

Der CSS Grid Playground ist ein interaktiver Builder für CSS-Grid-Layouts, das leistungsstärkste Layoutsystem in CSS. Grid bietet eine zweidimensionale Kontrolle über sowohl Zeilen als auch Spalten gleichzeitig und eignet sich daher ideal für komplexe Seitenlayouts. Dieses Tool bietet zwei Modi: Der Automodus verwendet repeat(n, 1fr) für einfache gleichmäßige Spaltengitter, während der manuelle Modus es Ihnen ermöglicht, benutzerdefinierte Template-Werte wie 1fr 2fr 1fr oder 200px auto 200px einzugeben. Sie können die Lücken zwischen Spalten und Zeilen unabhängig voneinander steuern und justify-items und align-items für die Ausrichtung von Inhalten innerhalb der Gridzellen festlegen. Die visuelle Vorschau zeigt farbige Gitterelemente an, damit Sie genau sehen, wie Ihre Layoutkonfiguration funktioniert. Dieses Tool ist hervorragend sowohl zum Lernen von Grid als auch für die Erstellung von Produktionslayouts.

Why Use CSS-Grid-Spielplatz?

Sowohl automatische als auch benutzerdefinierte Template-Modi für Flexibilität
Unabhängige Steuerung von Spalten- und Zeilenabständen
Justify-items und align-items für die Ausrichtung des Zellinhalts
Interaktive Vorschau mit farbigen Rasterelementen

Common Use Cases

Seitenlayouts

Entwerfen Sie komplette Seitenlayouts mit Header, Sidebar, Inhalt und Fußzeile.

Bildergalerien

Erstellen Sie responsive Bilderrastergalerien mit konsistenten Abständen.

Dashboard-Layouts

Erstellen Sie Dashboard-Widget-Layouts mit unterschiedlich großen Rasterbereichen.

CSS Grid lernen

Experimentieren Sie mit Raster-Eigenschaften, um zweidimensionale Layouts zu verstehen.

Technical Guide

CSS-Grid wird mit display: grid auf einem Container aktiviert. grid-template-columns definiert SpaltenTracks mithilfe von Längenwerten, fr-Einheiten (Bruchteile) oder Funktionen wie repeat() und minmax(). Die fr-Einheit verteilt den verfügbaren Platz proportional. grid-template-rows funktioniert auf die gleiche Weise für ZeilenTracks. gap (oder row-gap und column-gap) legt den Abstand zwischen Tracks fest. justify-items und align-items steuern, wie Inhalte innerhalb der Gridzellen ausgerichtet werden. Gitterelemente können mehrere Zellen mithilfe von grid-column: span n und grid-row: span n überspannen. Benannte Gitterbereiche mit grid-template-areas bieten eine visuelle Möglichkeit, komplexe Layouts zu definieren. Die Schlüsselwörter auto-fit und auto-fill in repeat() erstellen responsive Layouts ohne Media-Abfragen: repeat(auto-fit, minmax(250px, 1fr)) erstellt so viele Spalten, wie passen, mit einer Mindestbreite.

Tips & Best Practices

1
Verwenden Sie fr-Einheiten für flexible, proportionale Spaltenvergrößerung
2
Kombinieren Sie minmax() mit auto-fit für responsive Layouts ohne Media-Abfragen
3
Verwenden Sie grid-template-areas für lesbare, benannte Layout-Bereiche
4
Setzen Sie Abstände anstelle von Rändern für konsistente Zwischenzellenabstände

Related Tools

CSS-Flexbox-Spielplatz

Visueller CSS-Flexbox-Explorer mit interaktiven Steuerungselementen für alle Eigenschaften von Flex-Containern.

🎨 CSS & Design

CSS-Tabellengenerator

Erstellen Sie schön gestaltete HTML-Tabellen mit anpassbaren Farben, Streifen und Hover-Effekten.

🎨 CSS & Design

CSS-Spalten-Generator

Erstellen Sie Textlayouts mit mehreren Spalten und anpassbarer Spaltenanzahl, Abstand und Registrierungsstil.

🎨 CSS & Design

Responsiver Design-Tester

Vorschau von Websites bei gängigen Geräte-Breakpoints mit einem integrierten iframe-Viewer.

🎨 CSS & Design

Frequently Asked Questions

Q Was bedeutet fr in CSS Grid?

fr ist eine Brucheinheit, die den verfügbaren Platz proportional verteilt. 1fr 2fr erstellt zwei Spalten, wobei die zweite doppelt so breit ist.

Q Wie kann ich ein responsives Raster erstellen?

Verwenden Sie repeat(auto-fit, minmax(250px, 1fr)) für ein Raster, das sich automatisch an die Containerbreite anpasst.

Q Können Rasterelemente überlappen?

Ja, Rasterelemente können dieselben Zellen mit expliziter Platzierung belegen und so geschichtete Designs erstellen.

Q Wann sollte ich Grid anstelle von Flexbox verwenden?

Grid für zweidimensionale Layouts (Zeilen und Spalten). Flexbox für eindimensionale Layouts (eine Zeile oder eine Spalte).

Q Funktioniert CSS Grid in allen Browsern?

CSS Grid wird in allen modernen Browsern unterstützt. IE11 unterstützt eine ältere Grid-Spezifikation mit einigen Unterschieden.

About This Tool

CSS-Grid-Spielplatz is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.