CSS-Grid-Generator
Visueller Editor für CSS-Grid-Layouts mit Codegenerierung
Layouteinstellungen
Layoutvorlagen
Platzierung pro Element
Wählen Sie ein Element in der Vorschau oder Liste aus, um seine Eigenschaften zu bearbeiten.
CSS-Grid-Kurzreferenz
Rasterbahnen
Verwenden Sie fr-Einheiten für flexible Rasterbahnen, px/% für feste und auto für Rasterbahnen, deren Größe vom Inhalt abhängt.
Funktion repeat()
repeat(3, 1fr) ist die Kurzschreibweise für 1fr 1fr 1fr. Verwenden Sie auto-fill oder auto-fit für responsive Raster.
Elemente über mehrere Rasterbahnen
Verwenden Sie span N, um N Rasterbahnen zu überspannen, oder 1 / -1 für alle Spalten/Zeilen.
Live-Vorschau
Linienbeschriftungen zeigen die ersten 200 Rasterbahnen. Ihr vollständiges CSS und Layout bleiben erhalten.
Generiertes CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Ändern Sie die Einstellungen oder wählen Sie ein Element aus. Vorschau und CSS werden gemeinsam aktualisiert.
Über den CSS-Grid-Generator
Der CSS-Grid-Generator ist ein interaktives visuelles Tool zum Entwerfen und Erzeugen von CSS-Grid-Layouts. CSS Grid Layout ist das leistungsfähigste zweidimensionale Layoutsystem in CSS und erlaubt es, Spalten und Zeilen gleichzeitig zu definieren. Dieses Tool bietet einen praxisnahen Zugang zum Lernen, Experimentieren und Erzeugen von produktionsreifem CSS-Grid-Code.
Hauptfunktionen
- Volle Kontrolle über grid-template-columns und grid-template-rows mit freier Eingabe
- Schnellschaltflächen für Spalten und Zeilen für rasches Prototyping mit gleich großen Spuren
- Unabhängige Regler für row-gap und column-gap für präzise Abstandssteuerung
- Steuerung der Ausrichtung mit justify-items und align-items
- Platzierung pro Element mit grid-column und grid-row samt Schnellauswahl für Werte
- Eigene Beschriftungen für Grid-Elemente, um semantische Layoutbereiche zu visualisieren
- Pastellfarbene nummerierte Elemente mit Anzeige der Grid-Linien-Nummern
- Layout-Vorlagen: Blog-Layout, Dashboard, Fotogalerie und Landingpage
- Automatisch erzeugter CSS-Code mit Kopieren per Klick
- Vollständige Unterstützung des Dunkelmodus
CSS Grid verstehen
CSS Grid funktioniert über einen Grid-Container mit expliziten oder impliziten Spuren (Spalten und Zeilen). Elemente im Container werden automatisch in Zellen platziert, oder Sie platzieren sie mit grid-column und grid-row gezielt und lassen sie mehrere Spuren überspannen. Die Einheit fr steht für einen Bruchteil des verfügbaren Platzes und macht responsive Layouts unkompliziert. Die Funktion repeat() vereinfacht sich wiederholende Spurdefinitionen, und Funktionen wie minmax() sowie auto-fill/auto-fit ermöglichen wirklich responsive Raster ohne Media Queries.
Gängige CSS-Grid-Layoutmuster
CSS Grid eignet sich ideal für Layouts auf Seitenebene, etwa Blog-Designs mit Kopfzeile, Seitenleiste, Inhalt und Fußzeile, Dashboard-Oberflächen mit Navigation, Hauptinhalt und Widget-Bereichen, Fotogalerien mit Elementen über mehrere Zeilen und Spalten für einen Masonry-ähnlichen Effekt sowie Landingpages mit Hero-Bereichen in voller Breite, mehrspaltigen Feature-Rastern und Call-to-Action-Bereichen. Mit den Vorlagenschaltflächen können Sie diese Muster sofort ausprobieren.
Grid und Flexbox im Vergleich
Flexbox ist für eindimensionale Layouts gedacht (eine einzelne Zeile oder Spalte), CSS Grid dagegen glänzt bei zweidimensionalen Layouts, in denen Sie beide Achsen gleichzeitig kontrollieren müssen. Grid eignet sich am besten für Seitenlayouts und komplexe Komponentenanordnungen, Flexbox ist ideal, um den Platz zwischen Elementen in einer einzelnen Linie zu verteilen. Viele moderne Designs nutzen beides gemeinsam: Grid für die Gesamtstruktur der Seite und Flexbox für die Ausrichtung auf Komponentenebene.
Für wen ist dieses Tool gedacht?
- Webentwickler, die Seitenlayouts mit CSS Grid bauen
- Frontend-Entwickler, die responsive Rastersysteme als Prototyp bauen
- UI-/UX-Designer, die Rasterstrukturen vor der Umsetzung visualisieren
- Studierende, die zweidimensionale CSS-Layouttechniken lernen
- Lehrende, die CSS-Grid-Konzepte in Workshops oder im Unterricht vermitteln
- Alle, die schnell CSS-Grid-Code für ihre Webprojekte erzeugen müssen