Diese Seite wurde von der Cloud Translation API übersetzt.

CSS-Subraster

Das CSS-Raster ist eine sehr leistungsstarke Layout-Engine, aber die Zeile und Spaltenspuren, die in einem übergeordneten Raster erstellt wurden, können nur verwendet werden, um direkt zu positionieren, dem Rastercontainer untergeordnet sind. Jeder Autor hat benannte Rasterbereiche und an anderen Elementen als einem direktes Kind. Mit subgrid können Sie Größen, Vorlagen und Namen teilen mit verschachtelten Rastern. 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.

Es werden drei Karten nebeneinander angezeigt, die jeweils drei Inhalte enthalten:
Überschrift, Absatz und Link. Die Texte haben jeweils eine andere Länge,
unpassende Ausrichtungen in den Karten, da sie nebeneinander liegen.

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

Es werden drei Karten nebeneinander angezeigt, die jeweils drei Inhaltselemente enthalten:
Überschrift, Absatz und Link. Die Textlänge ist jeweils unterschiedlich, das Subraster hat jedoch
wurden die Ausrichtungen korrigiert, indem das höchste Element
in der Zeile für jedes Inhaltselement
Höhe, um eventuelle Ausrichtungsprobleme zu beheben.

Unterstützte Browser

Quelle

Subgrid-Grundlagen

Hier ist ein unkomplizierter Anwendungsfall, in dem die Grundlagen von CSS subgrid vorgestellt werden. A Das Raster wird mit zwei benannten Spalten definiert, die erste ist 20ch breit und die zweite ist „der Rest“ des Gruppenbereichs „1fr“. Die Spaltennamen sind nicht erforderlich, eignen sich hervorragend zur Veranschaulichung oder Information.

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

Dann wird ein untergeordnetes Element dieses Rasters über diese beiden Spalten als Rastercontainer festgelegt. und übernimmt die Spalten des übergeordneten Elements, indem grid-template-columns auf subgrid.

.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. Dieses Subraster kann jetzt jeder dieser Spalten untergeordnete Elemente zuweisen.

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

„Makro“ auf Seitenebene freigeben Raster

Designschaffende arbeiten oft mit gemeinsam genutzten Rastern, indem sie Linien über ein gesamtes Design zeichnen. und das gewünschte Element daran ausrichten. Das können Webentwickler jetzt auch! Genau diese und vieles mehr möglich.

Vom Makroraster bis zum fertigen Design. Bereiche mit einem Raster werden vorab erstellt und später werden die Komponenten nach Bedarf platziert.

Die Implementierung des gebräuchlichsten Designraster-Workflows Einblicke in die Funktionen, Workflows und Potenziale von subgrid erhalten.

Screenshot eines Makros für das Layout einer mobilen Seite, das mit den Chrome-Entwicklertools erstellt wurde Raster. Die Linien haben Namen und es gibt klare Bereiche für die Komponentenplatzierung.

A
Screenshot aus den Chrome CSS Grid DevTools mit einem Rasterlayout in der Größe für Mobilgeräte
in denen Zeilen und Spalten
zur schnellen Identifizierung benannt sind:
Systemstatus, primäre Navigation, primäre Kopfzeile, Haupt-, Fußzeile und System-Touch-Gesten.

Der folgende CSS-Code erstellt dieses Raster mit benannten Zeilen und Spalten für das Gerät Layout. 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 Raster-Overlay in CSS-Entwicklertools wie zuvor, aber dieses Mal mit
UI des mobilen Systems vorhanden, ein bisschen Schatten und etwas Farbe. Sie sehen, an welcher Stelle der
was das Design angeht.

Innerhalb dieses übergeordneten Elements befinden sich verschiedene verschachtelte Elemente. Das Design erfordert eine vollständige Bild unter den Navigations- und Überschriftenzeilen. Die linke und rechte Spalte am weitesten Die Zeilennamen lauten fullbleed-start und fullbleed-end. Rasterlinien auf diese Weise benennen ermöglicht es untergeordneten Elementen, sich an jedem Element gleichzeitig mit der Platzierung auszurichten Kurzschreibweise von fullbleed. Das ist sehr praktisch, wie Sie gleich sehen werden.

A
Screenshot des Raster-Overlays aus den Entwicklertools mit Schwerpunkt auf
die Spaltennamen „randloser Start“ und „Fullbleed-end“.

Mit dem Gerätelayout, das mit schönen benannten Zeilen und Spalten erstellt wurde, verwenden Sie subgrid, um die benannten Zeilen und Spalten an verschachtelte Rasterlayouts zu übergeben. Dieses ist der magische Moment von subgrid. Das Gerätelayout übergibt die benannten Zeilen und an den App-Container, der sie dann an alle zugehörigen Kinder.

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

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

Das CSS-Subgrid ist ein Wert, der anstelle einer Liste von Rasterspuren verwendet wird. Die Zeilen und Spalten, über die sich das Element erstreckt, enthalten jetzt dieselben Zeilen und Spalten, die es bietet. Dadurch stehen die Liniennamen aus dem .device-Raster zur Verfügung. an die untergeordneten Elemente von .app anstelle von nur .app. Elemente in .app wurden kann nicht auf die von .device vor dem Subgrid erstellten Rastertracks verweisen.

Nachdem das alles definiert ist, kann das verschachtelte Image im Layout dank subgrid. 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 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 skalieren und mit Ihnen wachsen kann.

Support prüfen

Die progressive Verbesserung mit CSS und Subgrid ist vertraut und unkompliziert. Verwende @supports und frage in der Klammer den Browser, ob er subgrid als Wert für Spalten oder Zeilen in einer Vorlage festlegen. Im folgenden Beispiel wird geprüft, Das Attribut grid-template-columns unterstützt das Schlüsselwort subgrid, das, wenn "true" bedeutet, dass Subgrid

@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 angekündigt ihre Tools in 115 während Firefox gibt es seit mindestens einem Jahr.

Screenshot-Vorschau des Subgrid-Badges, das sich auf Elementen in den Elementen befindet
.

Das Subgrid-Badge fungiert wie das Raster-Badge, unterscheidet aber optisch deutlich, Raster sind Unterraster und welche nicht.

Ressourcen

Diese Liste ist eine Zusammenstellung von abonnierten Artikeln, Demos und allgemeiner Inspiration. für den Einstieg. Wenn Sie nach dem nächsten Schritt für Ihr Subgrid suchen, Viel Spaß beim Entdecken dieser großartigen Ressourcen!