Meistern Sie CSS Subgrid mit diesem umfassenden Leitfaden. Erstellen Sie perfekt ausgerichtete, komplexe und wartungsfähige Web-Layouts für ein globales Publikum.
CSS Grid Subgrid: Ein tiefgehender Einblick in erweiterte Layout-Komposition
Webentwickler und -designer nutzen seit Jahren die Leistungsfähigkeit von CSS Grid, um anspruchsvolle, zweidimensionale Layouts mit beispielloser Kontrolle und Flexibilität zu erstellen. Grid revolutionierte unsere Denkweise über die Webseitenstruktur und brachte uns weg von den Einschränkungen von Floats und der eindimensionalen Natur von Flexbox. Aber trotz seiner Leistung blieb eine hartnäckige Herausforderung bestehen: das Ausrichten von Elementen innerhalb verschachtelter Grids am primären übergeordneten Grid. Es war eine häufige Quelle der Frustration, die oft zu komplexen Workarounds, manuellen Berechnungen oder dem vollständigen Verzicht auf eine verschachtelte Grid-Struktur führte. Hier kommt CSS Subgrid ins Spiel, die lang ersehnte Funktion, die genau dieses Problem elegant löst und ein neues Maß an Präzision und Raffinesse in der Layout-Komposition eröffnet.
Dieser umfassende Leitfaden richtet sich an ein globales Publikum von Frontend-Entwicklern, Webdesignern und UI-Engineers. Wir werden das Was, Warum und Wie von CSS Subgrid untersuchen und uns von grundlegenden Konzepten zu fortgeschrittenen praktischen Anwendungen bewegen. Am Ende werden Sie Subgrid nicht nur verstehen, sondern auch in der Lage sein, es zu verwenden, um robustere, wartungsfähigere und wunderschön ausgerichtete Layouts zu erstellen.
Die Herausforderung vor Subgrid: Das verschachtelte Grid-Problem
Um voll und ganz zu verstehen, was Subgrid zu bieten hat, müssen wir zuerst die Welt ohne es verstehen. Stellen Sie sich vor, Sie haben ein Haupt-Grid-Layout für Ihren Seiteninhalt. Innerhalb eines der Grid-Elemente müssen Sie ein weiteres Grid erstellen – ein verschachteltes Grid. Dies ist ein sehr gängiges Muster, insbesondere im komponentenbasierten Design.
Betrachten wir ein typisches Karten-Layout. Sie haben einen Container, der mehrere Karten enthält, und der Container ist ein CSS Grid. Jede Karte ist ein Grid-Element. In jeder Karte möchten Sie auch ein Grid verwenden, um ihren Inhalt zu strukturieren – eine Kopfzeile, einen Hauptteil und eine Fußzeile.
Ohne Subgrid hat das verschachtelte Grid innerhalb der Karte keine Kenntnis von den Grid-Linien des übergeordneten Containers. Es erstellt seinen eigenen, unabhängigen Grid-Formatierungskontext. Das bedeutet, dass die Spuren (Spalten und Zeilen), die Sie innerhalb der Karte definieren, vollständig von den Spuren des Hauptcontainers isoliert sind.
Ein visuelles Beispiel des Problems
Stellen Sie sich eine Produktliste vor, bei der jedes Produkt eine Karte ist. Sie möchten, dass die Produkttitel horizontal über alle Karten ausgerichtet sind und die Schaltflächen „In den Warenkorb“ am unteren Rand jeder Karte ebenfalls ausgerichtet sind, unabhängig von der Beschreibungslänge in der Mitte. Mit einem Standard-verschachtelten Grid ist dies fast unmöglich zu erreichen, ohne auf feste Höhen oder JavaScript-Berechnungen zurückzugreifen.
Hier ist ein vereinfachtes Codebeispiel für dieses Szenario:
HTML-Struktur:
<div class="card-container">
<div class="card">
<h3>Produkt A</h3>
<p>Eine kurze, prägnante Beschreibung.</p>
<button>In den Warenkorb</button>
</div>
<div class="card">
<h3>Produkt B</h3>
<p>Dieses Produkt hat eine viel längere Beschreibung, die sich auf mehrere Zeilen umbricht, was zu Ausrichtungsproblemen für die Elemente darunter führt.</p>
<button>In den Warenkorb</button>
</div>
<div class="card">
<h3>Produkt C</h3>
<p>Eine weitere Beschreibung.</p>
<button>In den Warenkorb</button>
</div>
</div>
CSS (ohne Subgrid):
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
border: 1px solid #ccc;
padding: 15px;
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Body (stretches), Footer */
gap: 10px;
}
.card h3 {
/* Keine spezielle Formatierung für die Position erforderlich */
}
.card p {
/* Dies wird sich aufgrund von 1fr ausdehnen */
}
.card button {
align-self: end; /* Versucht, die Schaltfläche zum unteren Rand ihres Grid-Bereichs zu verschieben */
}
In diesem Beispiel ist die Schaltfläche in der zweiten Karte niedriger als die Schaltflächen in den anderen Karten, da der Beschreibungstext mehr Platz einnimmt. Das interne Grid jeder Karte ist völlig unabhängig. Die `1fr`-Einheit für die Zeile des Absatzes gilt nur innerhalb des Kontexts der verfügbaren Höhe dieser einzelnen Karte. Es gibt keine gemeinsame Grid-Linie, an der sich die Schaltflächen ausrichten können. Genau dieses Problem sollte Subgrid lösen.
Einführung von CSS Subgrid: Das fehlende Teil für die perfekte Ausrichtung
CSS Subgrid ist ein Wert für `grid-template-columns` und `grid-template-rows`. Wenn es auf ein Grid-Element angewendet wird (das selbst zu einem Grid-Container wird), weist es dieses Element an, keine eigenen neuen Track-Auflistungen zu erstellen. Stattdessen leiht es sich die Grid-Tracks von seinem direkten übergeordneten Element und übernimmt sie.
Was ist Subgrid, technisch gesehen?
Im Wesentlichen stellt Subgrid eine direkte Verbindung zwischen einem verschachtelten Grid und seinem übergeordneten Grid her. Das verschachtelte Grid wird zu einem Teilnehmer am Grid-Formatierungskontext des übergeordneten Elements für die angegebene Dimension (Zeilen, Spalten oder beides). Die untergeordneten Elemente des Subgrid-Elements können dann auf diesem geerbten Grid platziert werden, wodurch sie sich an anderen Elementen außerhalb ihres unmittelbaren übergeordneten Elements, aber innerhalb desselben Haupt-Grids ausrichten können.
Die wichtigste Erkenntnis ist: Ein Subgrid definiert keine eigenen Spuren; es verwendet die seines übergeordneten Elements.
Das Schlüsselwort `subgrid`: Syntax und Verwendung
Die Syntax ist wunderschön einfach. Sie verwenden das Schlüsselwort `subgrid` als Wert für `grid-template-columns`, `grid-template-rows` oder beides für ein Element, das sowohl ein Grid-Element als auch ein Grid-Container ist.
Nehmen wir an, ein untergeordnetes Element `.nested-grid` ist ein Element innerhalb eines `.parent-grid`. Um es zu einem Subgrid zu machen:
.parent-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Beispiel-Parent-Tracks */
grid-template-rows: 100px auto 200px; /* Beispiel-Parent-Tracks */
}
.nested-grid {
/* Dieses Element muss die Spuren überspannen, die es verwenden möchte */
grid-column: 1 / 4; /* Überspannt alle 3 Spalten des übergeordneten Elements */
grid-row: 2 / 3; /* Liegt in der zweiten Zeile des übergeordneten Elements */
/* Jetzt aktivieren wir Subgrid */
display: grid;
grid-template-columns: subgrid; /* Erbt die 3 Spalten-Tracks vom übergeordneten Element */
grid-template-rows: subgrid; /* Erbt den einzelnen 'auto'-Zeilen-Track vom übergeordneten Element */
}
Ein wichtiger Punkt, den man sich merken sollte: Damit ein Subgrid Spuren erben kann, muss es sie zuerst belegen. Im obigen Beispiel überspannt `.nested-grid` alle drei Spalten seines übergeordneten Elements. Wenn wir also `grid-template-columns: subgrid;` festlegen, erhält es Zugriff auf dieselben drei Spuren. Seine eigenen untergeordneten Elemente können jetzt mithilfe der Grid-Linien 1 bis 4 des Spalten-Grids des übergeordneten Elements platziert werden.
Browser-Unterstützung und Progressive Enhancement
Zum Zeitpunkt dieses Schreibens genießt Subgrid eine starke Unterstützung in modernen Browsern, einschließlich Firefox, Chrome, Edge und Safari. Dies macht es zu einem praktikablen Werkzeug für Produktionswebsites, die sich an eine globale Benutzerbasis richten. Wie bei jeder modernen CSS-Funktion ist es jedoch ratsam, Benutzer älterer Browser zu berücksichtigen.
Progressive Enhancement ist hier die perfekte Strategie. Wir können die `@supports`-Regel in CSS verwenden, um ein solides Fallback-Layout für Browser bereitzustellen, die Subgrid nicht verstehen, und dann das Subgrid-gestützte Layout für diejenigen anwenden, die es verstehen.
/* --- Fallback für ältere Browser --- */
.card {
display: flex;
flex-direction: column;
justify-content: space-between; /* Ein gutes Flex-Fallback */
}
/* --- Subgrid-Erweiterung für moderne Browser --- */
@supports (grid-template-rows: subgrid) {
.card {
display: grid;
grid-template-rows: subgrid; /* Überschreibt die Flex-Anzeige */
grid-row: span 3; /* Geht davon aus, dass das übergeordnete Grid 3 Zeilen für Header, Inhalt, Footer hat */
}
}
Dieser Ansatz gewährleistet eine funktionale und akzeptable Erfahrung für alle und liefert gleichzeitig ein überlegenes, perfekt ausgerichtetes Layout für die Mehrheit der Benutzer in modernen Browsern.
Praktischer Tiefgang: Subgrid in Aktion
Theorie ist unerlässlich, aber zu sehen, wie Subgrid reale Probleme löst, ist der Punkt, an dem seine Stärke wirklich deutlich wird. Lassen Sie uns unser Kartenkomponentenbeispiel wieder aufgreifen und es mit Subgrid beheben.
Beispiel 1: Die perfekt ausgerichtete Kartenkomponente
Unser Ziel ist es, die Kartenüberschriften, Inhaltsbereiche und Fußzeilen über alle Karten hinweg auszurichten und so saubere horizontale Linien zu erzeugen, unabhängig von der Inhaltslänge.
Zuerst müssen wir unser übergeordnetes Grid anpassen. Anstatt Spalten zu definieren, definieren wir auch Zeilen, die den gewünschten Abschnitten unserer Karten (Header, Body, Footer) entsprechen.
Neues HTML (keine Änderungen erforderlich):
<div class="card-container">
<!-- Karten gehen hier, wie zuvor -->
</div>
Neues CSS (mit Subgrid):
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Zeilen für unsere Kartenstruktur definieren */
grid-template-rows: auto 1fr auto; /* Zeile für Header, flexibler Body, Zeile für Footer */
gap: 20px;
}
.card {
border: 1px solid #ccc;
padding: 15px;
/* --- Die Subgrid-Magie --- */
display: grid;
/* Die Karte selbst muss alle Zeilen überspannen, die sie verwenden wird */
grid-row: 1 / 4; /* Überspannt alle drei Zeilen, die im übergeordneten Element definiert sind */
/* Jetzt diese Zeilen erben */
grid-template-rows: subgrid;
}
/* Platzieren Sie die untergeordneten Elemente der Karte auf dem geerbten übergeordneten Grid */
.card h3 {
grid-row: 1; /* Platzieren Sie sie in der ersten Zeile des Grids des übergeordneten Elements */
}
.card p {
grid-row: 2; /* Platzieren Sie sie in der zweiten (flexiblen) Zeile */
}
.card button {
grid-row: 3; /* Platzieren Sie sie in der dritten Zeile */
align-self: end; /* Optional: Am unteren Rand innerhalb dieser Zeile ausrichten */
}
Was ist gerade passiert?
- Der `.card-container` definiert jetzt ein Drei-Zeilen-Grid: eine `auto`-Größe für die Header, eine `1fr`-flexible Zeile für den Hauptinhalt und eine weitere `auto`-Größe für die Schaltflächen.
- Jede `.card` soll alle drei dieser Zeilen überspannen (`grid-row: 1 / 4`).
- Entscheidend ist, dass wir `display: grid` und `grid-template-rows: subgrid` auf der `.card` festlegen. Dies sagt der Karte: „Erstellen Sie keine eigenen Zeilen. Verwenden Sie die drei Zeilen, die Sie von Ihrem übergeordneten Element überspannen.“
- Jetzt werden die `h3`, `p` und `button` innerhalb jeder Karte auf demselben gemeinsamen Grid platziert. Das `h3` von Karte 1 befindet sich im selben Track wie das `h3` von Karte 2. Der `button` von Karte 1 befindet sich im selben Track wie die Schaltfläche von Karte 2. Das Ergebnis? Perfekte horizontale Ausrichtung über die gesamte Komponente hinweg.
Dies ist eine revolutionäre Veränderung. Wir haben ein komplexes Ausrichtungsziel mit einfachem, deklarativem CSS erreicht, ohne Hacks und unter Beibehaltung einer sauberen, semantischen HTML-Struktur.
Beispiel 2: Ausrichten von Formularfeldern in einem komplexen Layout
Formulare sind ein weiterer Bereich, in dem die Ausrichtung für eine saubere Benutzererfahrung entscheidend ist. Stellen Sie sich einen Abschnitt einer Seite vor, der ein Grid-Element ist, und in diesem Abschnitt haben Sie ein Formular mit Beschriftungen und Eingaben, die Sie mit anderen Elementen auf der Seite ausrichten möchten.
HTML-Struktur:
<div class="page-layout">
<aside>... Seitenleisteninhalt ...</aside>
<main>
<h1>Profileinstellungen</h1>
<form class="profile-form">
<label for="name">Vollständiger Name</label>
<input type="text" id="name" />
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" />
<label for="country">Land/Region</label>
<input type="text" id="country" />
</form>
</main>
</div>
CSS mit spaltenbasiertem Subgrid:
.page-layout {
display: grid;
/* Ein gängiges Layout: Seitenleiste, Hauptinhalt mit zwei Unterspalten */
grid-template-columns: 200px [main-start] 150px 1fr [main-end];
gap: 30px;
}
main {
grid-column: main-start / main-end; /* Überspannen Sie die beiden Hauptinhaltspalten */
display: grid;
/* Dies ist der Schlüssel: die Spalten des übergeordneten Elements erben */
grid-template-columns: subgrid;
/* Wir können bei Bedarf unsere eigenen Zeilen definieren */
grid-auto-rows: min-content;
align-content: start;
}
main h1 {
/* Lassen Sie die Überschrift beide geerbten Spalten überspannen */
grid-column: 1 / 3;
}
.profile-form {
/* Dieses Formular ist auch ein Grid-Element innerhalb von 'main' */
grid-column: 1 / 3;
display: grid;
/* Und wir machen AUCH DARAUS ein Subgrid! */
grid-template-columns: subgrid;
gap: 15px;
grid-auto-rows: min-content;
}
/* Platzieren Sie jetzt Beschriftungen und Eingaben auf dem geerbten Grid auf Seitenebene */
.profile-form label {
grid-column: 1; /* Am ersten Spalten- (150px von .page-layout) ausrichten */
text-align: right;
}
.profile-form input {
grid-column: 2; /* An der zweiten Spalte (1fr von .page-layout) ausrichten */
}
In diesem erweiterten Beispiel haben wir ein verschachteltes Subgrid. Das Element `main` wird zu einem Subgrid, um die Spaltenspuren von `.page-layout` zu erben. Dann wird das Formular (`form`) darin ebenfalls zu einem Subgrid und erbt diese Spuren erneut. Dadurch können die Beschriftungen und Eingaben des Formulars direkt auf dem Hauptseiten-Grid platziert werden, wodurch sichergestellt wird, dass sie perfekt mit der Gesamtseitenstruktur übereinstimmen, die im Container der obersten Ebene definiert ist. Dieses Maß an kompositorischer Kontrolle war zuvor mit reinem CSS unvorstellbar.
Subgrid für Zeilen und Spalten: Eindimensionale vs. zweidimensionale Vererbung
Sie müssen Subgrid nicht gleichzeitig für beide Achsen verwenden. Sie können auswählen, ob Sie Spuren nur für Spalten, nur für Zeilen oder für beides erben möchten. Dies bietet eine fein abgestimmte Kontrolle über Ihre Layouts.
Spaltenbasierte Subgrids: `grid-template-columns: subgrid;`
Dies ist ideal für die horizontale Ausrichtung von Elementen über Komponenten hinweg, wie im obigen Formularbeispiel. Wenn Sie `grid-template-columns: subgrid;` verwenden, müssen Sie weiterhin Ihre eigenen Zeilenspuren mithilfe von Standardwerten wie `auto`, `1fr` oder Pixelwerten (z. B. `grid-template-rows: auto 1fr;`) definieren. Das verschachtelte Grid erbt die Spalten, ist aber für die eigene Größenanpassung und Zählung der Zeilen verantwortlich.
Zeilenbasierte Subgrids: `grid-template-rows: subgrid;`
Dies ist perfekt für die vertikale Ausrichtung von Elementen, wie wir es im Kartenkomponentenbeispiel getan haben. Es eignet sich hervorragend, um sicherzustellen, dass horizontale Abschnitte verschiedener Komponenten ausgerichtet sind. Bei Verwendung von `grid-template-rows: subgrid;` müssen Sie Ihre eigenen Spaltenspuren definieren (z. B. `grid-template-columns: 1fr 1fr;`).
Beides kombinieren: Die vollständige Vererbung
Wenn Sie sowohl `grid-template-columns: subgrid;` als auch `grid-template-rows: subgrid;` festlegen, wird das verschachtelte Grid zu einem echten Proxy für das übergeordnete Grid in seinem ausgewiesenen Bereich. Es definiert keine eigenen Spuren. Dies ist leistungsstark für Komponenten, die streng auf einen Teil des übergeordneten Grids beschränkt sein müssen, während ihre untergeordneten Elemente die volle Freiheit haben, auf dieser geerbten Grid-Struktur platziert zu werden.
Stellen Sie sich ein Dashboard-Widget vor. Das Widget selbst könnte 3 Spalten und 2 Zeilen des Haupt-Dashboard-Grids umfassen. Indem Sie das Widget zu einem vollständigen Subgrid machen, können die Elemente innerhalb des Widgets (z. B. ein Diagrammtitel, das Diagramm selbst und eine Legende) präzise auf diesen 3 Spalten und 2 Zeilen platziert werden, wobei sie sich an Elementen in benachbarten Widgets ausrichten.
Erweiterte Konzepte und Nuancen
Wenn Sie sich mit Subgrid vertrauter machen, werden Sie auf einige seiner subtileren und leistungsfähigeren Aspekte stoßen.
Subgrid und `gap`
Die Eigenschaft `gap` auf dem übergeordneten Grid wird vom Subgrid geerbt. Der Abstand zwischen den Spuren ist Teil der Grid-Definition. Dies ist normalerweise das, was Sie möchten, da es den gesamten Layout über konsistente Abstände beibehält. Sie können jedoch einen `gap` auf dem Subgrid-Container selbst angeben. Dies wird zum geerbten Abstand addieren, ein Verhalten, dessen man sich bewusst sein sollte. In den meisten Fällen sollten Sie den Abstand auf dem übergeordneten Grid definieren und das Subgrid ihn für perfekte Konsistenz erben lassen.
Größenanpassung und Überspannen in einem Subgrid-Kontext
Dies ist eine der leistungsstärksten Funktionen. Wenn Sie ein Element innerhalb eines Subgrids platzieren und ihm mitteilen, dass es mehrere Spuren überspannen soll (z. B. `grid-column: span 2;`), überspannt es die Spuren des ursprünglichen übergeordneten Grids. Es überspannt nicht zwei Spuren des Subgrid-Containers; es überspannt zwei Spuren, die das Subgrid geerbt hat.
Dies ermöglicht eine unglaubliche kompositorische Flexibilität. Ein Element tief in der DOM-Struktur kann so gestaltet werden, dass es sich an der übergeordneten Seitenstruktur ausrichtet und diese überspannt, wodurch es auf kontrollierte und vorhersehbare Weise aus den visuellen Grenzen seines unmittelbaren Containers ausbricht. Dies ist fantastisch für die Erstellung von dynamischen Layouts im Magazin-Stil, bei denen ein Bild mehrere Spalten des Hauptartikel-Grids umfassen kann, obwohl es sich in einem `figure`-Element befindet.
Barrierefreiheitsaspekte
Einer der großen Vorteile von CSS Grid, der sich auf Subgrid erstreckt, ist die Trennung von Quellreihenfolge und visueller Darstellung. Mit Subgrid können Sie eine logische und zugängliche HTML-Dokumentstruktur (z. B. eine Überschrift gefolgt von ihrem Inhalt) beibehalten und gleichzeitig das Grid verwenden, um ein komplexeres oder kreativeres visuelles Layout zu erzielen.
Da Subgrid Ihnen hilft, Layout-Hacks zu vermeiden, führt es oft zu saubererem HTML. Ein Screenreader durchläuft ein logisches Dokument, während ein visueller Benutzer ein perfekt ausgerichtetes Design sieht. In unserem Karten-Layout bleibt beispielsweise das HTML für jede Karte eine in sich geschlossene, logische Einheit (`h3` -> `p` -> `button`). Subgrid koordiniert einfach die visuelle Ausrichtung zwischen diesen Einheiten, ohne den Dokumentfluss zu verändern, was ein großer Gewinn für die Barrierefreiheit und ein Kernprinzip der modernen Webentwicklung ist.
Die Zukunft des CSS-Layouts: Der Platz von Subgrid im Ökosystem
Subgrid ist kein Ersatz für Flexbox oder reguläres CSS Grid. Es ist eine leistungsstarke Erweiterung, die eine spezifische, entscheidende Lücke schließt. Im modernen CSS-Layout-Ökosystem geht es darum, das richtige Werkzeug für die jeweilige Aufgabe zu verwenden:
- Flexbox: Am besten für eindimensionale Layouts, zum Verteilen von Platz entlang einer einzigen Achse und zum Ausrichten von Elementen innerhalb eines Containers. Perfekt für Navigationsleisten, Schaltflächengruppen und einfache Komponenteninhalte.
- CSS Grid: Am besten für zweidimensionale Layouts auf Seitenebene, zum Erstellen von Beziehungen zwischen Zeilen und Spalten. Die Grundlage für Ihre Gesamtseitenstruktur.
- CSS Subgrid: Die Brücke zwischen verschachtelten Komponenten und dem Hauptseiten-Grid. Es ist das Werkzeug, nach dem Sie greifen, wenn sich Elemente innerhalb eines Grid-Elements an Elementen ausserhalb dieses Elements ausrichten müssen.
In Zukunft funktioniert Subgrid wunderbar mit anderen modernen CSS-Funktionen wie Container-Queries. Sie könnten eine Komponente haben, die ein Subgrid-Layout verwendet, wenn der Container breit ist, aber in einem schmalen Container in einem einfachen Block- oder Flex-Layout angeordnet wird. Diese Kombination aus Makro-Layout (Grid), Ausrichtung auf Komponentenebene (Subgrid) und containerbewusster Reaktionsfähigkeit (Container Queries) bietet Frontend-Entwicklern ein unglaublich leistungsstarkes und ausdrucksstarkes Toolkit für den Aufbau der nächsten Generation von Weboberflächen.
Fazit: Nutzen Sie die Kraft der ausgerichteten Komposition
CSS Subgrid ist mehr als nur eine neue Funktion; es ist ein Paradigmenwechsel in der Art und Weise, wie wir komplexe Layouts im Web erstellen können. Es löst ein lange bestehendes Problem mit einer eleganten und intuitiven Lösung und fördert saubereren Code, wartungsfähigere Stylesheets und visuell perfekte Designs.
Indem wir verschachtelten Grids ermöglichen, an der Gestaltung ihrer übergeordneten Elemente teilzunehmen, ermöglicht uns Subgrid Folgendes:
- Perfekte Ausrichtung erreichen: Stellen Sie sicher, dass sich Elemente in separaten Komponenten ohne Hacks oder JavaScript fehlerfrei ausrichten.
- DRYer Code schreiben: Definieren Sie Ihre primäre Grid-Struktur einmal und lassen Sie verschachtelte Elemente sie erben, wodurch sich sich wiederholende Spurdefinitionen vermeiden lassen.
- Wartbarkeit verbessern: Die Layoutlogik wird im übergeordneten Grid zentralisiert, wodurch Aktualisierungen und responsive Anpassungen viel einfacher werden.
- Barrierefreiheit verbessern: Erstellen Sie anspruchsvolle visuelle Layouts unter Beibehaltung einer logischen und semantischen Quellreihenfolge.
Mit breiter Browser-Unterstützung ist jetzt der perfekte Zeitpunkt für Entwickler und Designer auf der ganzen Welt, Subgrid in ihren Workflow zu übernehmen. Beginnen Sie damit, Komponenten zu identifizieren, die von der elementübergreifenden Ausrichtung profitieren würden, experimentieren Sie mit Zeilen- und Spaltenvererbung und erleben Sie die Zufriedenheit, Layouts zu erstellen, die unter der Haube ebenso robust und logisch sind wie auf dem Bildschirm schön. Die Ära der kompromissbehafteten verschachtelten Layouts ist vorbei; die Ära der erweiterten, ausgerichteten Komposition hat wirklich begonnen.