Vor einigen Wochen sprach ich am
Frontend NE in Newcastle und erklärte größtenteils, welche Funktionen in CSS Grid Subgrid ab Grid Level 2 enthalten sind. Da diese Eigenschaft (in Browsern) nicht implementiert war, habe ich dafür eine Reihe von Demos mit DevTools modelliert Aufführungen.
Auf dem Weg nach San Francisco auf Smashing Conf, wo ich einen CSS-Layout-Workshop durchführte, erhielt ich Zugriff auf den Firefox Nightly-Test, für den diese Eigenschaft frühzeitig implementiert wurde.
Dies bedeutet, dass ich einige Folien für meine Auftritte im Mai wiederholen muss. Dort werden echte Screenshots verwendet.
Ich habe ein paar Screenshots auf Twitter gepostet und werde alle meine Beispiele in
Grid by Example veröffentlichen , sobald die CSS Grid Subgrid-Eigenschaft mit dem Flag in der Firefox Nigtly-Hauptassembly funktioniert. Für alle, die wichtigere Dinge zu tun haben, als über das Wochenende Twitter zu schauen, hier ein paar Screenshots. Sie enthalten Links zu
My CodePen- Beispielen, sodass Sie den Code für Subgrid-Elemente (Subgrid) sehen können. Ich habe das Raster (Raster) und das Subgrid (Subgrid) in Firefox DevTools hervorgehoben, damit Sie sehen können, was Sie sich ansehen müssen.
Raster für Spalten und Zeilen
In diesem Fall befindet sich das Subgrid in den Spalten und Zeilen des übergeordneten Elements. Dies bedeutet, dass im Teilgitterbereich kein verstecktes Gitter vorhanden ist, da beide Größen an die verfügbaren Spuren des übergeordneten Gitters gebunden sind.
CodePen - Raster für Spalten und ZeilenNur Spalte Masche
In diesem Fall habe ich ein Subgrid für die Spalten verwendet. Dies bedeutet, dass ich implizite Netzspuren verwenden kann, um so viele Linien hinzuzufügen, wie für Elemente benötigt werden. Zeilen verwenden ihre eigene Größe als verschachteltes Raster ohne Subnetz.
CodePen - Nur-Spalten-RasterNur Subnetz
In diesem Fall habe ich das Zeilen-Subgrid erstellt und die Spalten wie üblich in fr-Einheiten definiert.
Wie Sie sehen können, stimmen die Spaltenpfade nicht mit den übergeordneten überein, da sie ihre eigene Rasterdefinition verwenden.
CodePen - Subgrid nur für ZeichenfolgenIch freue mich sehr über Fortschritte bei der Entwicklung von CSS Grid Subgrid sowie über die Gelegenheit, in meinen Seminaren und Berichten darüber zu sprechen.
Weitere Informationen zu Subgrid finden Sie unter folgenden Links: