jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Subgrid Layout Generator

Erstelle Parent-Grid- und Child-Subgrid-CSS für Layouts mit gemeinsamer Rasterausrichtung.

Tool wird geladen...

Was ist CSS Subgrid Layout Generator?

Subgrid ist eine CSS-Grid-Funktion, bei der ein verschachtelter Grid-Container die Grid-Spuren seines übergeordneten Elements erben kann. Anstatt eigene grid-template-columns oder grid-template-rows zu definieren, verwendet das Kind subgrid, um Elemente an den Grid-Linien des übergeordneten Elements auszurichten. Dies ist nützlich für Kartenraster, bei denen jede Karte eine interne Ausrichtung benötigt.

Kurze Antwort

Verwenden Sie CSS-Subgrid, um verschachtelte Grid-Elemente an den Spuren des übergeordneten Grids auszurichten. Das Kind verwendet grid-template-columns: subgrid und/oder grid-template-rows: subgrid, um Spurgrößen, Abstände und benannte Linien vom übergeordneten Grid zu erben.

Last updated: 2026-05-28

Einschränkungen

  • Subgrid erfordert, dass das übergeordnete Element ein Grid-Container mit expliziten Spuren ist. Wenn das übergeordnete Element automatisch generierte Spuren (implizites Grid) verwendet, hat das Subgrid keine zu erbenden Spuren.
  • Die Browserunterstützung für Subgrid ist neuer als für grundlegendes CSS-Grid. Firefox lieferte es zuerst aus (v71), Chrome und Edge fügten es in v117 hinzu, Safari in v16. Ältere Browser ignorieren Subgrid vollständig.
  • Das Subgrid-Kind kann den übergeordneten Abstand nicht überschreiben. Abstandswerte werden vom nächsten Grid-Vorfahren geerbt und können auf dem Subgrid-Element selbst nicht geändert werden.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Definieren Sie die Spalten des übergeordneten Grids und optional die Zeilen. Das Subgrid-Kind erbt diese Spuren.
  2. Legen Sie die Spalten- und Zeilenspanne für das Subgrid-Kind fest —wie viele übergeordnete Grid-Zellen es belegt.
  3. Wählen Sie, ob das Kind subgrid für Spalten, Zeilen oder beide verwendet.
  4. Kopieren Sie das übergeordnete und das Kind-CSS und wenden Sie passende Selektoren in Ihrem HTML an.

Wofür du es nutzen kannst

  • Ein Kartenraster erstellen, bei dem jede Karte eine Kopfzeile, einen Hauptteil und eine Fusszeile hat, die spaltenübergreifend ausgerichtet sind.
  • Ein Formularlayout erstellen, bei dem Label-Input-Paare mithilfe von Subgrid abschnittsübergreifend ausgerichtet sind.
  • Ein Dashboard entwerfen, bei dem Widgets unterschiedlicher Grösse die Ausrichtung mit dem Hauptgrid teilen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Kartenraster mit ausgerichtetem Inhalt

Ein Produktraster hat drei Spalten. Jede Karte belegt eine Spalte und verwendet subgrid für Zeilen, sodass Titel, Beschreibung und Preis unabhängig von der Inhaltslänge horizontal über alle Karten hinweg ausgerichtet sind.

Beispiel

Mehrabschnitts-Formularlayout

Ein Formular hat zwei Abschnitte, die sich die Spaltenausrichtung teilen. Jeder Abschnitt ist ein Subgrid-Kind, das die Label-Input-Spaltenspuren erbt und so eine konsistente Ausrichtung ohne Wiederholung der Grid-Definitionen gewährleistet.

Haufige Fehler

  • Subgrid ohne ein übergeordnetes Grid verwenden —subgrid muss von einem Grid-Container mit expliziten Spuren abstammen.
  • Sowohl grid-template-columns: subgrid als auch explizite Spaltenwerte setzen —subgrid ersetzt die übergeordneten Spuren, ergänzt sie nicht.
  • Vergessen, dass subgrid Abstände vom übergeordneten Element erbt —wenn das übergeordnete Element gap: 16px hat, verwendet das Subgrid-Kind standardmässig ebenfalls 16px Abstände.

Überprüfung

  1. Überprüfen Sie das Layout im Browser-DevTools-Grid-Inspektor —Subgrid-Spuren sollten visuell mit den übergeordneten Grid-Spuren übereinstimmen.
  2. Testen Sie in Firefox und Chrome, um das browserübergreifende Subgrid-Verhalten zu bestätigen, da es subtile Unterschiede in der Behandlung impliziter Spuren gibt.

FAQ

Fragen zu CSS Subgrid Layout Generator

Was ist der Unterschied zwischen Subgrid und verschachtelten Grids?

Ein verschachteltes Grid erzeugt unabhängige Spuren innerhalb eines Kind-Elements —es teilt keine Ausrichtung mit dem übergeordneten Grid. Subgrid erbt die Spuren des übergeordneten Grids, sodass Elemente im Subgrid mit Elementen im übergeordneten Grid ausgerichtet werden, als ob sie alle in einem flachen Grid wären. Dies ermöglicht spurenübergreifende Ausrichtung.

Erbt Subgrid benannte Grid-Linien vom übergeordneten Element?

Ja. Benannte Grid-Linien, die in grid-template-columns oder grid-template-rows des übergeordneten Elements definiert sind, stehen im Subgrid zur Verfügung. Dies erleichtert die Platzierung von Subgrid-Elementen auf benannten Linien, die sich über das gesamte Layout erstrecken.

Welche Browser unterstützen Subgrid?

Chrome 117+, Edge 117+, Firefox 71+ und Safari 16+. Firefox war der erste Browser, der Subgrid auslieferte. Es kann sicher als progressive Verbesserung verwendet werden —Browser, die Subgrid nicht unterstützen, fallen auf das regul盲re Grid-Verhalten des Kind-Elements zurück.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren