CSS-Grid mit Subgrid und Container-Queries bauen

Was macht der CSS-Grid-Generator?

Der Generator baut CSS-Grid-Layouts visuell. Spalten und Reihen werden über Track-Controls definiert — pro Track ein Unit-Picker (fr, px, %, auto, min-content, max-content, minmax) und ein Wert-Editor. Template-Areas erstellst du, indem du Zellen in einer Matrix anklickst und Region-Namen eintippst. Per-Item-Inspektoren erlauben grid-area, numerische Spalten-/Reihen-Bereiche, Subgrid-Toggles und order-Overrides.

Über der Konfiguration zeigt eine Side-by-Side-Vorschau das Layout in drei Viewports gleichzeitig — Mobile (375 px), Tablet (768 px) und Desktop (1280 px). Edits propagieren live in alle drei. Das ist der entscheidende Unterschied zu Generatoren mit Breakpoint-Switcher: du siehst sofort, wie ein Layout-Wechsel auf allen drei Geräten wirkt, statt jeden einzeln durchzuklicken.

Hinweis zur Vorschau: Die drei Viewports werden über gescopte CSS-Regeln gerendert (kein <iframe>), damit die Konfiguration pur-client und SSR-kompatibel bleibt. Das ist illustrativ, nicht pixelgenau: vw-, cqi- und cqw-Einheiten lösen gegen die echte Seitenbreite des Tools auf, nicht gegen die 375/768/1280 px der Stage. Für die Primitive fr, px, %, auto und minmax() stimmt die Darstellung exakt; für @container-Breakpoints siehst du die Schaltlogik korrekt, aber die Container-Query-Auflösung in der gestageten Box ist eine Annäherung.

Der Output kommt in vier Formaten: Plain CSS mit display: grid plus grid-template-*-Properties, Tailwind v4 mit Arbitrary-Value-Klassen für Tracks und grid-template-areas, SCSS mit wiederverwendbaren $grid-*-Variablen, und passendes HTML-Markup für jedes Format. Alle Tabs sind paste-ready.

Wie funktioniert Subgrid?

subgrid löst ein Problem, das CSS-Grid lange nicht hatte: Karten in einer Reihe sollen ihre Header und Footer auf gemeinsamen Linien ausrichten, auch wenn die Inhaltslängen variieren. Ohne Subgrid hilft nur JavaScript-Höhen-Synchronisation oder das Aufgeben des Karten-Konzepts. Mit Subgrid setzt jede Karte grid-template-rows: subgrid und übernimmt die Reihen-Definition ihres Eltern-Grids — Header und Footer landen automatisch auf derselben Höhe.

Browser-Support seit Ende 2023 flächendeckend: Chrome 117, Safari 16 und Firefox 71 unterstützen Subgrid in beiden Achsen. Die meisten Online-Generatoren ignorieren das Feature noch komplett. Dieser Generator emittiert subgrid als First-Class-Toggle pro Item plus eine Status-Pille, sobald Subgrid irgendwo aktiv ist, damit du Browser-Anforderungen sofort dokumentieren kannst.

Wann nimmt man Container-Queries?

Container-Queries (@container-Regel + container-type: inline-size) sind die zweite große CSS-Layout-Innovation des Jahrzehnts. Sie reagieren auf die Größe eines bestimmten Eltern-Containers statt auf die Viewport-Breite. Anwendungsfall: eine Card-Komponente, die in der Sidebar als kompakter Stack rendert und im Hauptbereich als horizontaler Drei-Spalten-Block — ohne dass du die Card-Komponente mit Sidebar-spezifischen Klassen verschmutzen musst.

Der Generator emittiert opt-in einen .grid-container { container-type: inline-size; }-Wrapper plus bis zu drei @container (min-width: Npx)-Blöcke mit eigenen Track-Definitionen pro Breakpoint. Das HTML-Markup wird automatisch entsprechend angepasst. Container-Queries werden seit 2023 in allen großen Browsern unterstützt.

Wie schreibe ich CSS-Grid in Tailwind v4?

Tailwind hat in v4 die Konfiguration auf CSS-First umgestellt und Arbitrary-Values flächendeckend zur Norm gemacht. Statt der starren grid-cols-12-Skala emittiert der Generator den präzisen Track-Ausdruck:

Konzept	Tailwind v4	Plain CSS
Gleiche fr-Tracks	grid-cols-2	grid-template-columns: 1fr 1fr
Mixed Units	grid-cols-[200px_1fr_auto]	grid-template-columns: 200px 1fr auto
Responsive Karten	grid-cols-[repeat(auto-fill,minmax(280px,1fr))]	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
Template-Areas	[grid-template-areas:'header_header''sidebar_main']	grid-template-areas: "header header" "sidebar main"
Subgrid	grid-cols-subgrid	grid-template-columns: subgrid
Item-Span	col-span-3	grid-column: span 3
Named-Area	[grid-area:header]	grid-area: header

Underscores zwischen Cells in Arbitrary-Values sind ein v4-Quirk — Tailwind kann keine Leerzeichen in Klassen-Namen parsen, also nutzt v4 _ als Trenner und konvertiert beim Build zu Leerzeichen. Der Generator setzt das automatisch korrekt.

Welche Layout-Presets sind enthalten?

Fünf kuratierte Real-World-Layouts:

Holy-Grail-Layout. Header oben, Sidebar/Main/Aside in der Mitte, Footer unten. Klassiker mit grid-template-areas. Item-Definition via Namen statt Linien-Nummern — sehr lesbar im Stylesheet.

Karten-Raster. Responsive Karten via repeat(auto-fill, minmax(280px, 1fr)). Bricht automatisch um, sobald der Platz nicht reicht, ohne Media-Queries. Karten-Inhalte sollten min-width: 0 setzen, sonst kann ein langes Wort den minmax-Boden sprengen.

Magazin-Layout. 12-Spalten-Grid mit Item-Spans für Hero, Lead, Sidebar, Feature und Aside. Flexibel genug für redaktionelle Vielfalt, strukturiert genug für konsistente Wiederverwendung.

Dashboard. Header oben, Sidebar links, Content rechts, Status unten. Solides Admin-Shell-Skelett ohne position: absolute.

Subgrid-Karten. Karten mit ausgerichteten Header- und Footer-Reihen via subgrid. Demonstriert das stärkste Argument für Grid Level 2 — saubere vertikale Linien ohne JavaScript-Helfer.

Was bedeutet der Reihenfolge-Hinweis?

WCAG 2.2 Erfolgskriterium 1.3.2 — „Meaningful Sequence” verlangt, dass die Lese- und Tab-Reihenfolge dem visuellen Lese-Fluss entspricht. Wenn du Items per order oder grid-area so anordnest, dass ein im DOM später deklariertes Item visuell vor einem früher deklarierten erscheint, passiert Folgendes:

• Sehende Maus-Nutzer:innen lesen die visuelle Reihenfolge — das Layout fühlt sich richtig an.
• Tastatur-Nutzer:innen springen mit Tab durch die DOM-Reihenfolge — sie landen in einer anderen Sequenz.
• Screen-Reader lesen ebenfalls DOM-Reihenfolge — und sprechen das Layout damit anders vor.

Der Generator meldet solche Drifts inline. Lösungswege: entweder die DOM-Reihenfolge anpassen (Items in der gewünschten visuellen Reihenfolge im HTML deklarieren) oder das Layout so umbauen, dass keine order-/grid-area-Verschiebung nötig ist.

Was sind die häufigsten CSS-Grid-Fallen?

min-content versus 0. Items haben standardmäßig min-width: auto, das ist der intrinsische Mindest-Inhalt. Bei langen Wörtern oder breiten Bildern sprengt ein einzelnes Item das Layout. Fix: min-width: 0 auf dem Item — dann respektiert es das minmax() korrekt.

grid-template-areas mit Lücken. Jede Reihe braucht die gleiche Anzahl Zellen. Rechtecke statt L-Formen — eine Region darf sich nicht über zwei nicht-zusammenhängende Bereiche erstrecken. Punkt-Zellen (.) markieren leere Stellen ausdrücklich.

fr mit absoluter Mindest-Breite. 1fr verteilt nur Restplatz nach Abzug aller fixen Tracks. Wenn der Inhalt einer fr-Spalte größer wird als der Restplatz, dehnt sich die Spalte trotzdem — der Container kann breiter werden. Fix: minmax(0, 1fr) statt 1fr.

Subgrid braucht ein Eltern-Grid. grid-template-columns: subgrid ohne explizit definiertes Eltern-Grid hat keinen Effekt — und der Browser meldet keinen Fehler. Erst wenn ein Vorfahr display: grid plus explizite Tracks setzt, übernimmt das subgrid-Item diese.

Wie unterscheidet sich dieser Generator?

Vergleichbare Online-Generatoren liefern meist nur Plain CSS, eine Breakpoint-Vorschau zur Zeit und keinen Hinweis auf Tab-Reihenfolge oder Subgrid. Dieser Generator setzt fünf Akzente:

• Subgrid First-Class — die meisten Generatoren ignorieren das Feature komplett. Hier ist es ein Toggle pro Item.
• Container-Queries opt-in — keiner der getesteten Konkurrenten emittiert @container-Blöcke. Bei uns reagiert das Grid wahlweise auf Viewport ODER Container-Breite.
• Drei-Viewports parallel — andere Tools zeigen einen Breakpoint zur Zeit; hier siehst du Mobile, Tablet und Desktop gleichzeitig.
• Tailwind v4 Arbitrary-Values — andere Tools schreiben noch grid-cols-12. Wir emittieren grid-cols-[200px_1fr_auto] mit Tailwind-v4-Syntax.
• WCAG-Reihenfolge-Hinweis — kein anderes Tool warnt vor Tab-Order-Drift, obwohl WCAG 2.2 das verlangt.

Häufige Fragen

Was macht ein CSS-Grid-Generator?

Der Generator baut CSS-Grid-Layouts visuell. Du setzt Spalten und Reihen über UI-Controls, malst Template-Areas in eine Cell-Matrix, weist Items per grid-area zu und siehst das Ergebnis live in drei Viewports parallel — Mobile, Tablet und Desktop. Der Output kommt als Plain CSS, Tailwind v4, SCSS oder HTML.

Wie funktioniert CSS-Subgrid?

Subgrid wird per grid-template-columns: subgrid oder grid-template-rows: subgrid auf einem Grid-Item gesetzt. Das Item übernimmt dann die Tracks seines Eltern-Grids statt eigene zu definieren. Klassischer Anwendungsfall: Karten-Header und -Footer richten sich an einer gemeinsamen Linie aus, ohne JavaScript-Höhen-Synchronisation. Unterstützt seit Chrome 117, Safari 16 und Firefox 71.

Was ist der Unterschied zwischen Container-Queries und Media-Queries?

Media-Queries reagieren auf Viewport-Größen, Container-Queries auf die Größe eines bestimmten Eltern-Containers. Ein @container (min-width: 480px)-Block triggert, wenn der Container, nicht das Browser-Fenster, mindestens 480 px breit ist. Das macht Komponenten echt wiederverwendbar — eine Card-Komponente passt sich an, egal ob sie in der Sidebar oder im Hauptbereich liegt. Erfordert container-type: inline-size auf dem Eltern-Element.

Wann nimmt man CSS-Grid statt Flexbox?

Grid ist zwei-dimensional und plant Zeilen UND Spalten gleichzeitig — ideal für Seiten-Layouts, Magazin-Strukturen, Karten-Raster und Dashboard-Shells. Flexbox ist ein-dimensional und schiebt Items entlang einer Achse — perfekt für Navigations-Leisten, Toolbars oder vertikale Listen. In der Praxis kombiniert man beides: Grid fürs Außenskelett, Flexbox für die Innenkomponenten.

Was sind grid-template-areas?

grid-template-areas ist eine visuelle Notation für CSS-Grid-Layouts: Du beschreibst die Anordnung über benannte Region-Namen in Zeichen-Strings, z.B. "header header" "sidebar main" "footer footer". Items mit grid-area: header landen automatisch dort. Vorteil: das Layout ist im Stylesheet sofort lesbar, kein Mit-Zählen von Spalten-Linien.

Wie schreibe ich CSS-Grid als Tailwind-v4-Klassen?

Tailwind v4 erlaubt Arbitrary-Values für alle Grid-Properties. grid-cols-[200px_1fr_auto] ersetzt die starre grid-cols-12-Skala. Template-Areas gehen über [grid-template-areas:'header_header''sidebar_main''footer_footer'] — Underscores zwischen Cells, einfache Anführungszeichen pro Reihe. Subgrid bekommt grid-cols-subgrid und grid-rows-subgrid als native Utility-Klassen.

Was zeigt der Reihenfolge-Hinweis?

WCAG 2.2 Erfolgskriterium 1.3.2 fordert, dass die Lese-/Tab-Reihenfolge mit der visuellen Reihenfolge übereinstimmt. Wenn du Items mit order oder grid-area so platzierst, dass sie visuell vor einem im DOM früher deklarierten Geschwister erscheinen, springt der Tab-Fokus für Tastatur- und Screen-Reader-Nutzer trotzdem in DOM-Reihenfolge — das Layout fühlt sich verkehrt herum an. Der Generator markiert solche Drifts inline.

Speichert das Tool meine Layouts?

Nein. Alle Einstellungen liegen ausschließlich im Browser-Tab — kein Server, kein Account, keine Cookies. Beim Neuladen startet der Editor mit den Default-Tracks. Wer ein Layout sichern will, kopiert den Code-Output in das eigene Stylesheet.

Welche CSS-Tools sind verwandt?

Weitere Tools für visuelles CSS-Authoring:

• Flexbox-Playground — Eindimensionale Flex-Layouts mit Achsen-Overlay und Per-Item-Overrides.
• CSS-Animation-Builder — Keyframe-Animationen mit Reduced-Motion-Fallback und Tailwind-v4-Export.
• Box-Shadow-Generator — Mehrschichtige Schatten mit Material-3-Elevation-Presets.
• CSS-Gradient-Generator — Linear-, Radial- und Konische-Verläufe mit OKLCH.