CSS-Subraster

Das CSS-Raster ist eine sehr leistungsstarke Layout-Engine. Die in einem übergeordneten Raster erstellten Zeilen- und Spalten-Tracks können jedoch nur verwendet werden, um direkte untergeordnete Elemente des Rastercontainers zu positionieren. Alle vom Autor definierten benannten Rasterbereiche und ‑linien wurden bei allen Elementen entfernt, die keine direkten untergeordneten Elemente waren. Mit subgrid können Sie die Größe von Tracks, Vorlagen und Namen über verschachtelte Raster teilen. In diesem Artikel wird die Funktionsweise erläutert.

Vor Subgrid wurden Inhalte oft manuell angepasst, um unregelmäßige Layouts wie dieses zu vermeiden.

Es werden drei Karten mit jeweils drei Inhaltsteilen angezeigt: Überschrift, Absatz und Link. Sie haben jeweils eine andere Textlänge, was zu ungünstigen Ausrichtungen in den Karten führt, wenn sie nebeneinander liegen.

Nach dem Unterraster können die Inhalte in variabler Größe ausgerichtet werden.

Es werden drei Karten mit jeweils drei Inhaltsteilen angezeigt: Überschrift, Absatz und Link. Die einzelnen Elemente haben eine andere Textlänge, aber das Subraster hat die Ausrichtungen korrigiert, indem die Zeilenhöhe durch das höchste Inhaltselement festgelegt werden kann. Dadurch wurden eventuelle Ausrichtungsprobleme behoben.

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Quelle

Subgrid-Grundlagen

Hier ist ein unkomplizierter Anwendungsfall, in dem die Grundlagen von CSS subgrid vorgestellt werden. Ein Raster ist mit zwei benannten Spalten definiert, von denen die erste 20ch breit und die zweite „der Rest“ des Bereichs 1fr ist. Die Spaltennamen sind nicht erforderlich, aber sie dienen lediglich zur Veranschaulichung.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Anschließend wird ein untergeordnetes Element dieses Rasters, das diese beiden Spalten umfasst, als Rastercontainer festgelegt und übernimmt die Spalten des übergeordneten Elements, indem grid-template-columns auf subgrid gesetzt wird.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
Screenshot der CSS-Raster-Entwicklertools, auf denen zwei Spalten nebeneinander mit einem Namen am Anfang der Spaltenzeile zu sehen sind.
https://codepen.io/web-dot-dev/pen/NWezjXv

Das war's schon. Die Spalten eines übergeordneten Rasters wurden effektiv um eine Ebene nach unten in ein untergeordnetes Raster verschoben. In diesem untergeordneten Raster können jetzt untergeordnete Elemente einer dieser Spalten zugewiesen werden.

Herausforderung! Wiederholen Sie die Demo für grid-template-rows.

„Makro“-Raster auf Seitenebene teilen

Designschaffende arbeiten oft mit gemeinsam genutzten Rastern, indem sie Linien über ein gesamtes Design zeichnen und jedes gewünschte Element daran ausrichten. Das können Webentwickler jetzt auch! Dieser Workflow und viele weitere sind jetzt möglich.

Vom Makro-Raster bis zum fertigen Design. Rasterbenannte Bereiche werden im Voraus erstellt und spätere Komponenten wie gewünscht platziert.

Die Implementierung des gebräuchlichsten Designer-Raster-Workflows liefert hervorragende Einblicke in die Funktionen, Workflows und Potenziale von subgrid.

Hier sehen Sie einen mit den Chrome-Entwicklertools erstellten Screenshot eines Makrorasters für das Layout einer mobilen Seite. Die Linien haben Namen und es gibt klare Bereiche für die Komponentenplatzierung.

Ein Screenshot aus den Chrome-CSS-Grid-DevTools, der ein Rasterlayout in mobiler Größe zeigt, bei dem Zeilen und Spalten zur schnellen Identifizierung benannt sind: fullbleed, system-status, primary-nav, primary-header, main, footer und system-gestures.

Der folgende CSS-Code erstellt dieses Raster mit benannten Zeilen und Spalten für das Gerätelayout. Jede Zeile und Spalte hat eine Größe.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Einige zusätzliche Stile ergeben das folgende Design.

Das gleiche CSS-DevTools-Raster-Overlay wie zuvor, diesmal aber mit einem Teil der mobilen System-UI, einigen Schatten und etwas Farbe. Hilft zu sehen, in welche Richtung sich das Design entwickelt.

In diesem übergeordneten Element befinden sich verschiedene verschachtelte Elemente. Das Design erfordert ein Bild in voller Breite unter den Navigations- und Überschriftenzeilen. Die Namen der Spalten links und rechts sind fullbleed-start und fullbleed-end. Wenn Sie Rasterlinien auf diese Weise benennen, können untergeordnete Elemente mit der Placement-Kurzschreibweise von fullbleed gleichzeitig an jedem Element ausgerichtet werden. Das ist sehr praktisch, wie Sie gleich sehen werden.

Ein herangezoomter Screenshot des Raster-Overlays aus den DevTools, der sich speziell auf die Spaltennamen „fullbleed-start“ und „fullbleed-end“ konzentriert.

Wenn das gesamte Gerätelayout mit hübschen benannten Zeilen und Spalten erstellt wurde, verwenden Sie subgrid, um die entsprechenden Zeilen und Spalten an verschachtelte Rasterlayouts zu übergeben. Das ist der magische Moment von subgrid. Das Gerätelayout übergibt die benannten Zeilen und Spalten an den App-Container, der sie dann an jedes untergeordnete Element übergibt.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS-Subgrid ist ein Wert, der anstelle einer Liste von Rastertracks verwendet wird. Die Zeilen und Spalten, die das Element vom übergeordneten Element überspannt, sind jetzt dieselben Zeilen und Spalten, die es anbietet. Dadurch sind die Liniennamen aus dem .device-Raster nicht nur für .app, sondern auch für die untergeordneten Elemente von .app verfügbar. Elemente innerhalb von .app konnten nicht auf die Raster-Tracks verweisen, die vor dem Subraster von .device erstellt wurden.

Nachdem Sie das alles definiert haben, kann das verschachtelte Bild dank subgrid jetzt im Layout bis zum Rand reichen. Es gibt keine negativen Werte oder Tricks, sondern einen schönen Einzeiler mit dem Hinweis: „Mein Layout erstreckt sich von fullbleed-start bis fullbleed-end.“

.app > main img {
    grid-area: fullbleed;
}
Das fertige Makro-Layout mit einem verschachtelten Bild in voller Breite, das ohne die primären Navigations- und Kopfzeilen korrekt platziert ist und sich über alle randlosen benannten Spaltenzeilen erstreckt.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Das ist ein Makroraster, das Designschaffende in CSS verwenden. Dieses Konzept kann nach Bedarf skaliert und mit Ihnen wachsen.

Support prüfen

Die progressive Verbesserung mit CSS und Subgrid ist vertraut und unkompliziert. Verwenden Sie @supports und fragen Sie den Browser in den Klammern, ob er „subgrid“ als Wert für Vorlagenspalten oder ‑zeilen versteht. Im folgenden Beispiel wird geprüft, ob die Eigenschaft grid-template-columns das Keyword subgrid unterstützt. Ist das der Fall, kann ein untergeordnetes Raster verwendet werden.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Entwicklertools

Chrome, Edge, Firefox und Safari bieten hervorragende CSS-Grid-Entwicklertools. Chrome, Edge und Firefox haben spezielle Tools für das Unter-Grid. Chrome kündigte seine Tools bereits seit 115 an, während es bei Firefox seit einem Jahr oder länger ist.

Screenshot-Vorschau des Subraster-Badges auf Elementen im Bereich „Elemente“

Das Symbol für untergeordnete Raster funktioniert wie das Symbol für Raster, unterscheidet aber visuell, welche Raster untergeordnete Raster sind und welche nicht.

Ressourcen

Diese Liste ist eine Zusammenstellung von untergeordneten Artikeln, Demos und allgemeinen Inspirationen für den Einstieg. Wenn Sie auf der Suche nach dem nächsten Schritt für Ihre Subgrid-Schulung sind,