Diese Seite wurde von der Cloud Translation API übersetzt.

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 dem Rastercontainer direkt untergeordnete Elemente zu positionieren. Alle vom Autor definierten benannten Rasterbereiche und -linien sind bei jedem anderen Element als einem direkt untergeordneten Element verloren gegangen. Mit subgrid können Trackgrößen, Vorlagen und Namen mit verschachtelten Rastern geteilt werden. In diesem Artikel wird die Funktionsweise erläutert.

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

Es werden drei Karten nebeneinander dargestellt, jede mit drei Inhaltselementen: Überschrift, Absatz und Link. Alle haben unterschiedliche Textlängen, was zu ungünstigen
Ausrichtungen auf den Karten führt, da sie nebeneinander liegen.

Nach dem Subraster können Inhalte mit unterschiedlicher Größe ausgerichtet werden.

Es werden drei Karten nebeneinander dargestellt, jede mit drei Inhaltselementen: Überschrift, Absatz und Link. Alle haben eine andere Textlänge, aber subgrid hat die Ausrichtungen korrigiert, indem es dem höchsten der einzelnen Inhaltselemente erlaubt hat, die Zeilenhöhe festzulegen, um Ausrichtungsprobleme zu beheben.

Unterstützte Browser

Quelle

Subgrid-Grundlagen

In diesem einfachen Anwendungsfall werden die Grundlagen des CSS-subgrid vorgestellt. 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, dienen aber zur Veranschaulichung und zu Informationszwecken.

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

Ein untergeordnetes Element dieses Rasters erstreckt sich über diese beiden Spalten, wird als Rastercontainer festgelegt und übernimmt die Spalten des übergeordneten Rasters, 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-Entwicklertools mit zwei Spalten nebeneinander und einem Namen am Anfang der Spaltenzeile. — https://codepen.io/web-dot-dev/pen/NWezjXv

Geschafft! Die Spalten eines übergeordneten Rasters wurden faktisch von einer Ebene an ein Subraster übergeben. Mit diesem Unterraster können jetzt beiden Spalten untergeordnete Elemente zugewiesen werden.

Herausforderung! Wiederhole die gleiche Demo, aber tu es für grid-template-rows.

"Makro"-Raster auf Seitenebene freigeben

Designschaffende arbeiten oft mit gemeinsamen Rastern, zeichnen Linien über ein ganzes Design und richten jedes gewünschte Element darauf aus. Das können jetzt auch Webentwickler! Dieser Workflow und viele weitere lassen sich jetzt realisieren.

Vom Makroraster zum fertigen Design. Rasterbenannte Bereiche werden im Voraus erstellt und spätere Komponenten werden nach Bedarf platziert.

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

Hier ist ein Screenshot eines Rasters des Rasters für das Layout-Makro für mobile Seiten aus den Chrome-Entwicklertools. Die Linien haben Namen und es sind klare Bereiche für die Platzierung der Komponenten vorhanden.

Ein Screenshot aus den Chrome CSS-Raster-Entwicklertools mit einem Rasterlayout in Mobilgerätgröße, in dem Zeilen und Spalten zur schnellen Identifizierung benannt sind: randlos, Systemstatus, primärer-Navigation, primärer Kopfzeile, Haupt-, Fußzeilen und System-Touch-Gesten.

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.

Dasselbe CSS-Entwicklertools-Raster-Overlay wie zuvor, aber dieses Mal mit einigen der mobilen System-UI, einigen Schatten und ein wenig Farbe. Hilft zu erkennen, in welche
Richtung das Design geht.

Innerhalb dieses übergeordneten Elements befinden sich verschiedene verschachtelte Elemente. Das Design erfordert ein Bild in voller Breite unter den Navigations- und Überschriftenzeilen. Die Namen der Spalten am weitesten linken und rechten Spalte sind fullbleed-start und fullbleed-end. Bei der Benennung von Gitterlinien auf diese Weise können die untergeordneten Elemente gleichzeitig an jeder der untergeordneten Linien ausgerichtet werden, wie bei der Placement-Kurzschrift von fullbleed. Wie Sie gleich sehen werden, ist das sehr praktisch.

Ein vergrößerter Screenshot des Raster-Overlays aus den Entwicklertools mit Fokus auf die Spaltennamen für den Start und das Ende in voller Benutzeroberfläche.

Wenn das gesamte Gerätelayout mit ansprechenden benannten Zeilen und Spalten erstellt wurde, verwenden Sie subgrid, um die gut benannten Zeilen und Spalten an verschachtelte Rasterlayouts zu übergeben. Das ist der magische subgrid-Moment. Das Gerätelayout übergibt die benannten Zeilen und Spalten an den App-Container, der sie dann an alle untergeordneten Elemente weitergibt.

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

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

Das CSS-Subraster ist ein Wert, der anstelle einer Liste von Rastertracks verwendet wird. Die Zeilen und Spalten, die das Element vom übergeordneten Element umfasst, sind jetzt dieselben Zeilen und Spalten, die es anbietet. Dadurch stehen die Liniennamen aus dem .device-Raster für untergeordnete Elemente von .app zur Verfügung, nicht nur für .app. Elemente innerhalb von .app konnten nicht auf die Rasterspuren verweisen, die von .device vor dem Subraster erstellt wurden.

Jetzt kann das verschachtelte Bild dank subgrid randlos im Layout angezeigt werden. Keine negativen Werte oder Tricks, sondern ein netter Einzeiler, der lautet: „Mein Layout erstreckt sich von fullbleed-start bis fullbleed-end.“

.app > main img {
    grid-area: fullbleed;
}

Das fertige Makro-Layout, vollständig mit einem verschachtelten Bild in voller Breite, das ordnungsgemäß in der primären Navigations- und Kopfzeilenzeile platziert ist und sich bis zu jeder der randlosen benannten Spaltenzeilen ausdehnt. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Das ist ein Makro-Raster, das wie Designer verwendet wird und in CSS implementiert ist. Dieses Konzept lässt sich nach Bedarf mit Ihnen skalieren und wachsen.

Support kontaktieren

Progressive Enhancement mit CSS und Subgrid ist vertraut und unkompliziert. Verwenden Sie @supports und fragen Sie den Browser in Klammern, ob er Subgrid als Wert für Vorlagenspalten oder -zeilen erkennt. Im folgenden Beispiel wird geprüft, ob das Attribut grid-template-columns das Schlüsselwort subgrid unterstützt. Bei „true“ bedeutet dies, dass das Subgrid verwendet werden kann.

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

Entwicklertools

Chrome, Edge, Firefox und Safari verfügen alle über großartige CSS-Grid-Entwicklertools, während Chrome, Edge und Firefox spezielle Tools zur Unterstützung von Subgrid bieten. Chrome hat seine Tools in Version 115 angekündigt, während sie bei Firefox seit mindestens einem Jahr verfügbar sind.

Screenshot-Vorschau des Rastersymbols auf Elementen im Steuerfeld „Elemente“.

Das Subgrid-Badge ähnelt dem Rasterlogo, unterscheidet jedoch visuell, welche Subgrids sind und welche nicht.

Ressourcen

Diese Liste ist eine Zusammenstellung von Subgrid-Artikeln, Demos und allgemeinen Inspirationen für den Einstieg. Viel Spaß beim Entdecken der Subgrid-Ausbildung!

Teil der Reihe zur neuen Interoperabilität