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 platzieren. Alle vom Autor definierten benannten Rasterbereiche und -linien sind bei jedem anderen Element als bei einem direkt untergeordneten Element verloren gegangen. Mit subgrid können Sie Track-Größen, Vorlagen und Namen mit verschachtelten Rastern teilen. In diesem Artikel erfahren Sie, wie das funktioniert.

Vor dem Subraster wurden Inhalte oft von Hand angepasst, um unschöne Layouts wie dieses zu vermeiden.

Es werden drei Karten nebeneinander angezeigt, jede mit drei Inhaltselementen: Überschrift, Absatz und Link. Alle haben eine unterschiedliche Textlänge, sodass die
Karten beieinander liegen, unpassend.

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

Es werden drei Karten nebeneinander angezeigt, jede mit drei Inhaltselementen: Überschrift, Absatz und Link. Jedes Element hat eine andere Textlänge, aber subgrid hat die Ausrichtungen korrigiert, indem es dem höchsten der einzelnen Inhaltselemente erlaubt hat, die Zeilenhöhe festzulegen, wodurch Ausrichtungsprobleme behoben werden.

Unterstützte Browser

Quelle

Subgrid – Grundlagen

Hier ist ein einfacher Anwendungsfall, in dem die Grundlagen des CSS-subgrid vorgestellt werden. Ein Raster wird mit zwei benannten Spalten definiert. Die erste ist 20ch breit und die zweite der Rest des Bereichs 1fr. Die Spaltennamen sind nicht erforderlich, aber sie eignen sich gut zur Veranschaulichung und zu Informationszwecken.

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

Dann überspannt ein untergeordnetes Raster 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 */
}

Screenshot der Entwicklertools für das CSS-Raster, in dem zwei Spalten nebeneinander mit einem Namen am Anfang der Spaltenzeile zu sehen sind. — https://codepen.io/web-dot-dev/pen/NWezjXv

Das ist alles. Die Spalten eines übergeordneten Rasters wurden faktisch von einer Ebene an ein Unterraster übergeben. Mithilfe dieses Unterrasters können nun beiden Spalten untergeordnete Elemente zugewiesen werden.

Herausforderung! Wiederhole die gleiche Demo, aber führe sie für grid-template-rows durch.

„Makroraster“ auf Seitenebene teilen

Designschaffende arbeiten oft mit gemeinsamen Rastern, zeichnen Linien über das gesamte Design und richten jedes gewünschte Element darauf aus. Jetzt können auch Webentwickler! Dieser und viele weitere Workflows lassen sich jetzt umsetzen.

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 liefern.

Hier ist ein Screenshot aus den Chrome-Entwicklertools eines Layout-Makros für Mobilgeräte. Die Linien haben Namen und es gibt klare Bereiche für die Platzierung von Komponenten.

Ein Screenshot aus den Chrome CSS-Raster-Entwicklertools mit einem Rasterlayout in der Größe für Mobilgeräte, in dem Zeilen und Spalten zur schnellen Identifizierung benannt sind: vollständig, Systemstatus, primärer Navigationsleiste, primärer Header, Hauptnummer, Fußzeile und Systemgesten.

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.

Dasselbe Raster-Overlay der CSS-Entwicklertools wie zuvor, aber mit einigen Schatten und etwas Farbe diesmal die Benutzeroberfläche des mobilen Systems. 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 Zeilen am weitesten links und rechts sind fullbleed-start und fullbleed-end. Wenn Sie Rasterlinien auf diese Weise benennen, können sich die untergeordneten Elemente gleichzeitig mit der Placement-Kürzel von fullbleed ausrichten. Wie Sie gleich sehen werden, ist das sehr praktisch.

Ein vergrößerter Screenshot des Raster-Overlays aus den Entwicklertools mit dem Fokus auf die Spaltennamen in voller Start- und Ende-Füllung

Das gesamte Gerätelayout wurde mit ansprechend benannten Zeilen und Spalten erstellt. Verwenden Sie subgrid, um die richtig benannten 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 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 Rasterspuren 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 Unterraster erstellt wurden.

Wenn alles definiert ist, kann das verschachtelte Bild jetzt dank subgrid randlos im Layout erscheinen. Keine negativen Werte oder Tricks, sondern ein guter Einzeiler, der besagt, dass sich mein Layout von fullbleed-start bis fullbleed-end erstreckt.

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

Das fertige Makro-Layout mit einem verschachtelten Bild in voller Breite, das korrekt unter der primären Navigation und den Kopfzeilen platziert ist und sich bis zu jeder der ausgefüllten benannten Spaltenzeilen ausdehnt. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Das war's auch schon ein Makroraster, wie Designer es verwenden, und das in CSS implementiert. Dieses Konzept kann nach Bedarf mit Ihnen skaliert und erweitert werden.

Support kontaktieren

Progressive Enhancement mit CSS und Subgrid ist vertraut und unkompliziert. Fragen Sie den Browser mithilfe von @supports in Klammern, ob er subgrid als Wert für Vorlagenspalten oder -zeilen erkennt. Im folgenden Beispiel wird geprüft, ob die grid-template-columns-Eigenschaft das subgrid-Keyword 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 bieten großartige CSS Grid-Entwicklertools. In Chrome, Edge und Firefox gibt es spezielle Tools für Subgrid. Chrome hat seine Tools in Version 115 angekündigt und seit mindestens einem Jahr bei Firefox.

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

Das Unterrastersymbol verhält sich wie das Rasterlogo, unterscheidet jedoch visuell, welche Gitter Unterraster sind und welche nicht.

Ressourcen

Diese Liste ist eine Zusammenstellung von Artikeln, Demos und allgemeinen Anregungen für den Einstieg. Wenn Sie auf der Suche nach dem nächsten Schritt für Ihre Subgrid-Ausbildung sind, haben Sie viel Spaß