Diese Seite wurde von der Cloud Translation API übersetzt.

CSS-Subraster

Veröffentlicht: 28. September 2023

Das CSS-Raster ist ein sehr leistungsstarkes Layout-System. Die Zeilen- und Spalten-Tracks, die in einem übergeordneten Raster erstellt werden, können jedoch nur zum Positionieren direkter Kinder des Rastercontainers verwendet werden. Alle vom Autor definierten benannten Rasterbereiche und ‑linien wurden bei allen Elementen entfernt, die keine direkten untergeordneten Elemente waren. Mit subgrid können Spurgröße, Vorlagen und Namen für verschachtelte Raster freigegeben werden. In diesem Artikel wird die Funktionsweise erläutert.

Vor dem Subgrid wurden Inhalte oft von Hand angepasst, um ungleichmäßige Layouts wie dieses zu vermeiden.

Drei Karten werden nebeneinander angezeigt, jede mit drei Inhaltselementen: Kopfzeile, Absatz und Link. Die Texte haben unterschiedliche Längen, was zu ungünstigen Ausrichtungen der Karten führt, wenn sie nebeneinander liegen.

Nach dem Subgrid können die Inhalte mit variabler Größe ausgerichtet werden.

Drei Karten werden nebeneinander angezeigt, jede mit drei Inhaltselementen: Kopfzeile, Absatz und Link. Die Textlänge ist bei jedem Element unterschiedlich, aber durch das Raster wurde die Ausrichtung korrigiert, da die Zeilenhöhe anhand des höchsten Inhaltselements festgelegt wird. So werden alle Ausrichtungsprobleme behoben.

Browser Support

Source

Grundlagen des untergeordneten Rasters

Hier ist ein einfacher Anwendungsfall, der die Grundlagen von CSS subgrid vorstellt. Ein Raster wird mit zwei benannten Spalten definiert. Die erste ist 20ch breit und die zweite ist der „Rest“ des Bereichs 1fr. Die Spaltennamen sind nicht erforderlich, eignen sich aber hervorragend zu illustrativen und pädagogischen Zwecken.

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

Ein untergeordnetes Element dieses Rasters, das diese beiden Spalten umfasst, wird 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 */
}

Ein Screenshot der CSS-Raster-DevTools mit zwei Spalten nebeneinander, die zu Beginn der Spaltenzeile einen Namen haben. — 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, aber für grid-template-rows.

„Makro“-Raster auf Seitenebene teilen

Designer arbeiten oft mit gemeinsamen Rastern, zeichnen Linien über ein gesamtes Design und richten alle gewünschten Elemente darauf aus. Jetzt können auch Webentwickler davon profitieren. Dieser Workflow und viele weitere sind jetzt möglich.

Vom Makro-Raster zum fertigen Design. Bereiche mit Namen werden vorab erstellt und später werden die Komponenten nach Bedarf platziert.

Die Implementierung des gängigsten Workflows für Designer-Raster kann hervorragende Einblicke in die Funktionen, Workflows und Möglichkeiten von subgrid bieten.

Hier sehen Sie einen Screenshot aus den Chrome DevTools, der ein Makro-Raster für das mobile Seitenlayout zeigt. Die Linien haben Namen und es gibt klare Bereiche für die Platzierung von Komponenten.

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.

Mit dem folgenden CSS-Code wird dieses Raster mit benannten Zeilen und Spalten für das Gerätelayout erstellt. 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.

Innerhalb dieses übergeordneten Elements befinden sich verschiedene verschachtelte Elemente. Das Design erfordert ein Bild in voller Breite unter den Navigations- und Kopfzeilen. Die Namen der Spaltenlinien links und rechts sind fullbleed-start und fullbleed-end. Wenn Sie Rasterlinien so benennen, können untergeordnete Elemente gleichzeitig mit der Platzierungsabkürzung von fullbleed 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 Sie das gesamte Gerätelayout mit gut benannten Zeilen und Spalten erstellt haben, können Sie mit subgrid die gut benannten Zeilen und Spalten an verschachtelte Rasterlayouts übergeben. Das ist der subgrid magische Moment. Das Gerätelayout übergibt die benannten Zeilen und Spalten an den App-Container, der sie dann an alle seine untergeordneten Elemente weitergibt.

.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 von seinem übergeordneten Element umfasst, 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 in .app konnten nicht auf die Rastertracks verweisen, die von .device vor dem Raster erstellt wurden.

Nachdem Sie das alles definiert haben, kann das verschachtelte Bild dank subgrid jetzt im Layout bis zum Rand reichen. Keine negativen Werte oder Tricks, sondern eine schöne One-Liner-Anweisung, die besagt: „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 sich korrekt unter den primären Navigations- und Kopfzeilen befindet und sich bis zu den einzelnen benannten Spaltenlinien erstreckt. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Das ist ein Makro-Raster, wie es Designer verwenden, in CSS implementiert. Dieses Konzept kann nach Bedarf skaliert und erweitert werden.

Support prüfen

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 */
}

Devtools

Chrome, Edge, Firefox und Safari bieten hervorragende CSS-Grid-Entwicklertools. Chrome, Edge und Firefox haben spezielle Tools für das Unter-Grid. Chrome hat seine Tools im Jahr 2015 angekündigt, während sie in Firefox schon seit mindestens einem Jahr verfügbar sind.

Screenshot-Vorschau des Logos für das untergeordnete Raster, das auf Elementen im Bereich „Elemente“ zu sehen ist.

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 enthält Artikel, Demos und Inspirationen zu Subgrids, die Ihnen den Einstieg erleichtern. Wenn Sie nach dem nächsten Schritt für Ihre Subgrid-Ausbildung suchen, finden Sie hier viele hilfreiche Ressourcen.