CSS Grid Level 2: Hier kommt das Subgrid

Wir sind jetzt über ein Jahr von der Landung des CSS-Grid-Layouts in den meisten unserer Browser entfernt, und die CSS-Arbeitsgruppe arbeitet bereits an Level 2 der Spezifikation. In diesem Artikel werde ich erklären, was derzeit Teil des Working and Editor's Draft dieser Spezifikation ist. Beachten Sie, dass sich hier alles ändern kann und nichts davon derzeit in Browsern funktioniert. Betrachten Sie dies als einen Einblick in den Prozess. Ich bin sicher, dass ich weitere praktische Artikel schreiben werde, wenn wir sehen, wie Implementierungen Gestalt annehmen.

CSS-Spezifikationsebenen

Die CSS-Grid-Funktionen, die wir derzeit in Browsern verwenden können, sind die von Level 1 der CSS-Grid-Spezifikation. Die verschiedenen Teile von CSS sind in Module aufgeteilt; Diese Modularisierung geschah, als CSS von CSS 2.1 abweichte, weshalb man manchmal Leute über CSS3 sprechen hört. In Wirklichkeit gibt es kein CSS3. Stattdessen gab es eine Reihe von Modulen, die alle Dinge enthielten, die bereits Teil der CSS2.1-Spezifikation waren. Jedes CSS, das in CSS2.1 existierte, wurde Teil eines Level-3-Moduls, daher haben wir CSS-Selektoren Level 3, da Selektoren in CSS2.1 existierten.

Neue CSS-Funktionen, die nicht Teil von CSS2.1 waren, wie z. B. CSS Grid Layout, beginnen bei Level 1. Die CSS Grid Level 1-Spezifikation ist im Wesentlichen die erste Version von Grid. Sobald eine Spezifikationsstufe den Status „Kandidatenempfehlung“ erreicht, werden keine wichtigen neuen Funktionen hinzugefügt. Das bedeutet, dass Browser und andere Benutzeragenten die Spezifikation implementieren können und sie zu einer W3C-Empfehlung werden kann. Wenn neue Features entworfen werden sollen, werden sie in einem neuen Level der Spezifikation geschehen. Wir sind an diesem Punkt mit CSS Grid Layout. Die Spezifikation der Ebene 1 befindet sich in CR, und eine Spezifikation der Ebene 2 wurde erstellt, damit an neuen Funktionen gearbeitet werden kann. Ich würde vorschlagen, sich den Editor's Draft anzusehen, wenn Sie die Spezifikationsdiskussionen verfolgen möchten, da dieser alle neuesten Änderungen enthalten wird.

Was wird Level 2 des CSS-Grids enthalten?

Letztendlich wird die Level 2-Spezifikation alles enthalten, was bereits in Level 1 enthalten ist, sowie einige neue Funktionen. Wenn Sie sich die Spezifikation zum Zeitpunkt des Schreibens ansehen, gibt es einen Hinweis, der erklärt, dass der gesamte Level 1 kopiert werden sollte, sobald Level 2 CR erreicht.

Wir können dann erwarten, einige neue Funktionen zu finden, und Level 2 der Grid-Spezifikation dreht sich alles um die Ausarbeitung der Subgrid -Funktion von CSS Grid. Diese Funktion wurde aus der Level-1-Spezifikation gestrichen, um Zeit zu haben, die Anwendungsfälle für Subgrids richtig zu verstehen und mehr Zeit für die Arbeit daran zu haben, ohne den Rest von Level 1 aufzuhalten. Im Rest dieses Artikels werde ich es tun Werfen Sie einen Blick auf die Subgrid-Funktion, wie sie derzeit im Editor's Draft beschrieben wird. Wir befinden uns mit dem Feature noch in einem sehr frühen Stadium, aber dies ist der perfekte Zeitpunkt, um mitzumachen und tatsächlich mitzugestalten, wie die Spezifikation entwickelt wird. Mein Ziel mit dem Schreiben dieses Artikels ist es, einige der diskutierten Dinge zu erklären, damit Sie verstehen und Ihren Input in die Diskussionen einbringen können.

Was ist ein Subgrid?

Wenn Sie CSS Grid Layout verwenden, können Sie bereits Grids verschachteln. Im folgenden Beispiel habe ich ein übergeordnetes Raster mit sechs Spaltenspuren und dreireihigen Spuren. Ich habe ein Element auf diesem Raster von Spalte Zeile 2 bis Zeile 6 und von Zeile Zeile 1 bis 3 positioniert. Ich habe dieses Element dann zu einem Rastercontainer gemacht und Spaltenspuren definiert.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Die Spuren unseres verschachtelten Gitters haben keine Beziehung zu den Spuren auf dem übergeordneten Gitter. Das bedeutet, dass wir, wenn wir in der Lage sein wollen, die Spuren unseres verschachtelten Gitters mit den Linien auf dem äußeren Gitter auszurichten, die Arbeit erledigen und Methoden zur Berechnung der Spurgrößen verwenden müssen, die sicherstellen, dass alle Spuren gleich bleiben. Im obigen Beispiel sehen die Spuren aufgereiht aus, bis ein Element mit einer größeren Größe zu einer Zelle des Rasters hinzugefügt wird (wodurch mehr Platz benötigt wird).

Bei Kolonnen lässt sich das obige Szenario oft umgehen, im Wesentlichen durch Einschränkung der Netzflexibilität. Sie könnten Ihre fr -Einheitsspalten minmax(0,1fr) machen, damit sie die Elementgröße bei der Raumverteilung ignorieren, oder Sie könnten wieder Prozentsätze verwenden. Dies entfernt jedoch einige der Vorteile der Verwendung von Rastern, und wenn es darum geht, Zeilen in einem verschachtelten Raster auszurichten, funktionieren diese Methoden nicht.

Nehmen wir an, wir möchten ein Kartenlayout, in dem die einzelnen Karten eine Kopf-, Haupt- und Fußzeile haben. Wir möchten auch, dass die Kopf- und Fußzeile über die Karten ausgerichtet sind.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Dies funktioniert, solange der Inhalt in jeder Kopf- und Fußzeile die gleiche Höhe hat. Wenn wir zusätzlichen Inhalt haben, wird die Illusion gebrochen und die Kopf- und Fußzeilen richten sich nicht mehr über die Zeile aus.

Erstellen eines Subgrids

Wir können uns jetzt ansehen, wie das Subgrid-Feature derzeit spezifiziert ist und wie es die oben gezeigten Probleme lösen könnte.

Hinweis : Zum Zeitpunkt des Schreibens funktioniert keiner der folgenden Codes in Browsern. Das Ziel hier ist es, die Syntax und Konzepte zu erklären. Die endgültige Spezifikation wird sich wahrscheinlich auch von diesen Details ändern. Als Referenz habe ich diesen Artikel auf der Grundlage des Editor's Draft geschrieben, der am 23. Juni 2018 verfügbar war.

Um ein Unterraster zu erstellen, haben wir einen neuen Wert für grid-template-rows und grid-template-columns . Diese Eigenschaften werden normalerweise mit einer Spurliste verwendet, die die Anzahl und Größe der Zeilen- und Spaltenspuren definiert. Beim Erstellen eines Subgrids möchten Sie diese Spuren jedoch nicht angeben. Stattdessen verwenden Sie den subgrid Wert, um grid mitzuteilen, dass dieses verschachtelte Grid die Anzahl der Spuren und die Spurgröße verwenden soll, die der Grid-Bereich, den es abdeckt, umfasst.

Im folgenden Code habe ich ein übergeordnetes Raster mit 6-Spalten-Tracks und 3-Zeilen-Tracks. Das verschachtelte Raster ist ein Rasterelement auf diesem übergeordneten Raster und erstreckt sich von Spaltenzeile 2 bis Spaltenzeile 6 und von Zeilenzeile 1 bis Zeilenzeile 4. Dies ist genau wie in unserem ersten Beispiel, aber wir können es uns jetzt mit ansehen Untergitter. Das verschachtelte Raster hat sowohl für grid-template-columns als auch für grid-template-rows -template-rows den Wert subgrid . Das bedeutet, dass das verschachtelte Raster jetzt 4-Spalten-Spuren und 2-Zeilen-Spuren hat, wobei dieselbe Größe verwendet wird wie die Spuren, die auf dem übergeordneten Element definiert sind.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Dies würde bedeuten, dass jeder Änderung der Spurgröße auf dem übergeordneten Element das verschachtelte Gitter folgen würde. Ein längeres Wort, das eine der Spuren im übergeordneten Raster breiter macht, würde dazu führen, dass diese Spur im verschachtelten Raster ebenfalls breiter wird, sodass sich die Dinge weiterhin ausrichten würden. Das würde auch umgekehrt funktionieren: Die Spuren des übergeordneten Grids könnten je nach Inhalt im Subgrid breiter werden.

Eindimensionale Untergitter

Sie können ein Unterraster in einer Dimension haben und die Spurgröße in einer anderen angeben. In diesem nächsten Beispiel wird das Unterraster nur in grid-template-columns angegeben. Für die Eigenschaft grid-template-rows ist eine Titelliste angegeben. Die Spaltenspuren bleiben daher wie die vier Spuren, die wir oben gesehen haben, aber die Zeilenspuren können separat zu den Spuren der Eltern definiert werden.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Das bedeutet, dass die Zeilen des Untergitters innerhalb des übergeordneten Gitters verschachtelt werden, genau wie beim Erstellen eines verschachtelten Gitters heute. Da sich unser verschachteltes Raster über zwei Zeilen des übergeordneten Rasters erstreckt, müssen eine oder beide dieser Zeilen erweitert werden, um den Inhalt des Unterrasters aufzunehmen, damit es nicht zu Überläufen kommt.

Sie könnten auch ein Unterraster in einer Dimension haben und die andere Dimension implizite Spuren verwenden. Im folgenden Beispiel habe ich keine Zeilenspuren angegeben und einen Wert für grid-auto-rows angegeben. Zeilen werden im impliziten Raster in der von mir angegebenen Größe erstellt, und wie im vorherigen Beispiel muss das übergeordnete Element Platz für diese Zeilen haben oder erweitert werden, um sie aufzunehmen.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Zeilennummerierung und Unterraster

Wenn wir uns unser erstes Beispiel noch einmal ansehen, wird die Spurgröße unseres Subgrids in beiden Dimensionen vom übergeordneten Element vorgegeben. Die Zeilennummern wirken jedoch wie gewohnt im Subgrid. Die erste Spaltenzeile in Inline-Richtung ist Zeile 1, und die Zeile am anderen Ende der Inline-Richtung ist Zeile -1. Auf die Zeilen des Unterrasters verweisen Sie nicht mit der Zeilennummer des übergeordneten Rasters.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Lücken und Untergitter

Das Unterraster erbt alle Spalten- oder Zeilenlücken, die im übergeordneten Raster festgelegt sind, dies kann jedoch durch Spalten- und Zeilenlücken überschrieben werden, die im Unterraster angegeben sind. Wenn beispielsweise das übergeordnete Raster einen column-gap von 20 Pixel hatte, das Unterraster jedoch einen column-gap von 0 hatte, würden die Rasterzellen des Unterrasters auf jeder Seite 10 Pixel gewinnen, um den Abstand auf 0 zu verringern die Gitterlinie verläuft im Wesentlichen in der Mitte der Lücke.

Wir können jetzt sehen, wie uns das Unterraster helfen würde, den zweiten Anwendungsfall vom Anfang dieses Artikels zu lösen, nämlich Karten mit Kopf- und Fußzeilen, die über die Karten hinweg ausgerichtet sind.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Liniennamen und Unterraster

Alle Liniennamen in Ihrem übergeordneten Grid werden an das Subgrid weitergegeben. Wenn wir also die Linien in unserem übergeordneten Raster benennen, könnten wir das Element entsprechend diesen Liniennamen positionieren.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Sie können Ihrem Unterraster auch Liniennamen hinzufügen, Rasterlinien können mehrere Liniennamen haben, sodass diese Namen den Linien hinzugefügt werden. Um Zeilennamen anzugeben, fügen Sie eine Liste dieser Namen nach dem subgrid von grid-template-columns und grid-template-rows hinzu. Wenn wir unser obiges Beispiel nehmen und den Unterrasterlinien auch Namen hinzufügen, erhalten wir am Ende zwei Liniennamen für jede Linie im Unterraster.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Implizite Spuren und Subgrid

Sobald Sie entschieden haben, dass eine Dimension Ihres Rasters ein Unterraster ist, wird die Möglichkeit entfernt, zusätzliche implizite Spuren in dieser Dimension zu haben. Wenn Sie weitere Elemente hinzufügen, die passen, werden die zusätzlichen Elemente in der letzten verfügbaren Spur des Unterrasters platziert, genauso wie Elemente in übergroßen Rastern behandelt werden. Bei einem im Subgrid erstellten Grid-Bereich, der mehr Spuren umfasst als verfügbar sind, wird die letzte Linie auf die letzte Linie des Subgrids gesetzt.

Wie oben erläutert, können Sie jedoch eine Dimension Ihres Subgrids genauso verhalten wie ein normales verschachteltes Grid, einschließlich impliziter Spuren.

Sich in den Prozess einbringen

Die Arbeit der CSS-Arbeitsgruppe findet öffentlich auf GitHub statt, genau wie jedes andere Open-Source-Projekt. Das macht es etwas einfacher, der Arbeit zu folgen, dass alles in einer Mailingliste passiert ist. Sie können sich die Probleme ansehen, die gegenüber Level 2 der CSS-Grid-Spezifikation aufgeworfen wurden, indem Sie im GitHub-Repository der CSS-Arbeitsgruppe nach Problemen suchen, die als css-grid-2 gekennzeichnet sind. Wenn Sie Gedanken oder einen Anwendungsfall zu einem dieser Probleme beitragen können, wäre dies willkommen.

Es gibt andere Funktionen, die Leute für das CSS-Grid-Layout angefordert haben, und die Tatsache, dass sie nicht in Level 2 enthalten sind, bedeutet nicht, dass sie nicht berücksichtigt werden. Sie können die Ebenen sehen, da ein Feature-Release möglicherweise in einem Produkt enthalten ist. Nur weil ein Feature nicht Teil des aktuellen Sprints ist, heißt das nicht, dass es nie passieren wird. Die Arbeit an neuen Webplattformfunktionen dauert in der Regel etwas länger als die durchschnittliche Produktveröffentlichung, aber es ist ein ähnlicher Prozess.

Wie lange dauert das alles?

Die Spezifikationsentwicklung und Browserimplementierung ist ein gewisser kreisförmiger, iterativer Prozess. Es ist nicht so, dass die Spezifikation „fertig“ sein muss, bevor wir einige Browser-Implementierungen sehen werden. Die anfänglichen Implementierungen werden wahrscheinlich hinter Feature-Flags stehen – genau wie die ursprüngliche Grid-Spezifikation. Achten Sie darauf, dass diese erscheinen, denn sobald es Code gibt, mit dem Sie spielen können, macht es das Nachdenken über diese Funktionen viel einfacher!

Ich hoffe, diese Tour durch das, was bald kommen könnte, war interessant. Ich freue mich, dass das Subgrid-Feature im Gange ist, da ich es immer für unerlässlich für ein vollständiges Grid-Layout-System für das Web gehalten habe. Sehen Sie sich diesen Bereich an, um mehr über die Fortschritte des Features und neue Browser-Implementierungen zu erfahren.