Redaktionelle Designmuster mit CSS-Raster und benannten Spalten

Viele Websites, insbesondere solche, die Inhalte in Langform anzeigen, haben ein ziemlich einfaches, sich wiederholendes Muster von Komponenten: einen Bereich in voller Breite für Bilder, einen zentralen Inhaltsbereich und vielleicht eine geteilte Ansicht von zwei Blöcken in halber Breite. Diese Komponenten wiederholen sich, um einen Artikel, Bilder und andere verwandte Inhalte anzuzeigen – wobei Inhaltsredakteure die richtige Komponente auswählen, wenn sie Artikel zur Veröffentlichung erstellen.

In diesem Artikel werde ich einen Ansatz für diese Art von redaktionellem Design demonstrieren, der auf einigen Techniken aufbaut, von denen einige in den folgenden Artikeln besprochen werden:

• „Ausbrechen mit CSS-Grid-Layout“
• „Ausbrechen mit CSS Grid erklärt“
• „Dinge im CSS-Grid-Layout benennen“

Abgesehen davon, dass dies eine nette Möglichkeit ist, Abschnitte Ihres Layouts zu benennen, enthüllt diese Technik eine ganze Reihe interessanter Dinge über das Rasterlayout, die Sie beim Erstellen Ihrer eigenen Layoutmuster nützlich finden können. Es demonstriert auch mehr von dem Versprechen von Subgrid (ein Teil der kommenden Stufe 2 der Grid-Spezifikation und wird in Firefox implementiert).

Benennen von Dingen im CSS-Grid-Layout

Wenn Sie CSS Grid Layout verwenden, können Sie Linien und Bereiche benennen. Beides kann die Arbeit mit Grid – insbesondere komplexen Grids – einfacher machen. Das Definieren von Namenskonventionen für Dinge in Ihrem Layout kann nützlich sein, wenn Sie mit Ihrem Team arbeiten. Es ist viel einfacher zu verstehen, wo etwas mit grid-area: content platziert wird, als wenn etwas von column-line: 3 / 9 platziert wird.

Wenn Sie den grid-template-areas Ansatz verwenden, geben Sie den Elementen, die Sie auf dem Grid platzieren möchten, einen Namen, indem Sie die Eigenschaft grid-area und sie dann um das Grid herum platzieren. Im folgenden Beispiel wird das Element mit dem grid-area: content in den Rasterbereich verschoben, der durch die Eigenschaft grid-template-areas definiert wird:

Dies funktioniert gut für Komponenten, bei denen Sie ein Element haben, das in einen Bereich passt. Wenn Sie jedoch mehrere Dinge im Inhaltsbereich (untereinander) platzieren möchten, ist die Verwendung von grid-area der falsche Ansatz. Stattdessen können Sie Namen für die Spaltenzeilen definieren und das Element von der Start- bis zur Endzeile platzieren.

Dies ist jedoch nicht so schön, wenn wir den Grid-Area-Ansatz verwenden, müssen wir sowohl die Start- als auch die Endlinie kennen, wenn wir ein Element mit grid-column oder grid-row – oder doch?

Schauen Sie sich dieses nächste CodePen-Beispiel an. Meine Elemente werden unter Verwendung eines einzelnen Namens oder Idents platziert, indem die Eigenschaft grid-column verwendet wird, obwohl einige der Rasterbereiche, auf die abgezielt wird, mehrere Spalten überqueren:

Mein Ziel ist es hier, die Komplexität des Grid-Setups bei der tatsächlichen Verwendung des Grids wegzuabstrahieren. Ich kann viel Arbeit in die Erstellung des anfänglichen Rasters stecken, aber dann Dinge platzieren, ohne zu viel darüber nachzudenken, während ich meine Seiten fülle. Ich möchte auch sicherstellen, dass wir die Komponenten so oft wie nötig wiederholen können, während wir den Artikel aufbauen. Was ich im Sinn habe, ist ein Inhaltsersteller, der ein CMS verwendet und Inhaltsblöcke mit den verschiedenen Mustern erstellt, während er weiß, dass sie im Gesamtraster korrekt untereinander platziert werden.

Um zu verstehen, wie ich zu diesem Punkt gekommen bin, müssen Sie einige Dinge über CSS-Grid-Layout sowie benannte Linien und Bereiche verstehen.

Wir können Linien benennen

Wie Sie bereits in meinem zweiten Beispiel oben gesehen haben, können wir Zeilen auf dem Raster so ziemlich alles nennen, was uns gefällt – außer dem Wort span . Der Name ist eher ein Ident als ein String, weshalb er nicht in Anführungszeichen gesetzt wird.

Sie werden jedoch viele Beispiele sehen, bei denen die Namenskonventionen name-start und name-end verwendet werden, die -start an den Namen der Startzeile und -end an den Namen der Endzeile anhängen. Dies ist keine reine Konvention und für die Technik werde ich Ihnen zeigen, warum wir unsere Linien auf diese Weise benennen müssen. Wählen Sie also einen Namen für den Bereich, den Sie beschreiben, und fügen Sie dann die Suffixe -start und -end hinzu – die natürlich übereinstimmen müssen!

Wir benennen unsere Zeilen in eckigen Klammern. Zeilen können (und müssen oft) mehrere Namen haben. In diesem Fall werden die Namen durch Leerzeichen getrennt. Wenn Sie die Elemente mit linienbasierter Positionierung platzieren, können Sie einen beliebigen Namen für die Linie auswählen, um die Platzierung vorzunehmen.

Wenn unsere benannten Zeilen vorhanden sind, können wir unsere Elemente mithilfe von grid-column platzieren, indem wir den Namen der Start- und Endzeile angeben. Dieses Muster ist genauso wie die Verwendung von Zeilennummern, also ist der Name vor dem Schrägstrich die Startzeile und der Name danach die Endzeile.

Dies platziert die Elemente, ist aber nicht der ordentliche Einzelname pro Element, den ich im Beispiel verwendet habe. Aufgrund der besonderen Art und Weise, wie Grid benannte Bereiche und Linien behandelt, haben wir jetzt jedoch alles an Ort und Stelle.

Liniennamen geben uns einen benannten Bereich

Angenommen, Sie haben Ihre Zeilen wie ich mit -start und -end benannt, gibt Grid Ihnen einen benannten Bereich des von Ihnen verwendeten Hauptnamens. Daher habe ich in meinem Fall Bereiche namens content , start-half , end-half , full und center . Jeder dieser Bereiche ist eine einzelne Zeile (da ich keine benannten Zeilen habe), jedoch erstreckt er sich über die Spaltenspuren von der -start bis zur -end -Zeile.

Benannte Bereiche geben uns eine benannte Zeile des verwendeten Hauptnamens

Wenn wir unsere Elemente so platzieren möchten, als ob wir einen Spaltennamen hätten, müssen wir auch die Tatsache nutzen, dass wir beim Erstellen eines Rasterbereichs einen Zeilennamen des verwendeten Hauptnamens erhalten; das heißt, der Hauptname ist der Name, bei dem -start und -end entfernt wurden. Dieser Zeilenname wird zum Anfang oder Ende des Bereichs aufgelöst, je nachdem, ob wir auf grid-column-start oder grid-column-end abzielen.

Wir haben also einen Bereich namens content , weil wir Spaltenzeilen namens content-start und content-end haben. Der Bereich mit dem Namen content gibt uns auch die Möglichkeit, grid-column-start: content zu verwenden, der in die Startzeile dieses Inhaltsbereichs aufgelöst wird, während grid-column-end: content in die Endzeile des Inhaltsbereichs aufgelöst wird.

Das bedeutet also, dass wir ein Element im Inhaltsbereich platzieren können, indem wir Folgendes verwenden:

 .content { grid-column: content / content; }

Als Nächstes können wir diese Technik nun weiter aufräumen, da Sie, wenn Sie eine benannte Zeile für den grid-column-start verwenden und die Endzeile weglassen (anstatt eine Spur zu überspannen, wie dies der Fall wäre, wenn Sie Zeilennummern verwenden), grid kopiert den Namen in die Endzeile. Daher ist grid-column: content genau dasselbe wie grid-column: content / content;

Das ist dann alles, was wir brauchen, um Elemente mithilfe von grid-column mit einem einfachen, einzelnen Namen platzieren zu können. Dieses Verhalten ist alles genau wie angegeben und nicht irgendeine Art von „Hack“. Es demonstriert die Tiefe des Denkens, das in die Erstellung der Grid-Layout-Spezifikation geflossen ist, und die Menge an sorgfältiger Arbeit, die darauf verwendet wurde, es so einfach zu machen, Elemente in unseren Designs anzuordnen.

Verleihen Sie dieser Technik Superkräfte mit Subgrid

Ich denke, diese Technik ist eine nette, die es ermöglicht, auf sehr einfache Weise zu deklarieren, wo Elemente auf dem Gitter platziert werden sollen. Wenn wir dem Mix jedoch Subgrid-Unterstützung hinzufügen, wird es in der Tat sehr leistungsfähig.

Derzeit wird Subgrid in Firefox implementiert, daher erfordern diese nächsten Beispiele, dass Firefox Nightly ausgeführt wird. Sie können Nightly hier herunterladen.

Der subgrid -Wert von grid-template-columns und grid-template-rows bedeutet, dass die auf einem übergeordneten Grid erstellte Größenanpassung von einem Element gewählt werden kann, das ein untergeordnetes Element des Grids ist (vorausgesetzt, es verwendet auch das Grid-Layout), indem display: grid angewendet.

Hinweis : Sie können mehr über die Funktionen von Subgrid in meinen Artikeln hier im Smashing Magazine „CSS Grid Level 2: Here Comes Subgrid“ und „Digging Into The Display Property: Grids All The Way Down“ lesen.

Leitungsnamen vom Elternteil werden an Unterraster übergeben

Zusätzlich zu den Spurgrößeninformationen, die an das untergeordnete Raster übergeben werden, werden alle auf dem übergeordneten Raster festgelegten Zeilennamen übergeben. Das bedeutet, dass wir unsere „Spaltennamen“ innerhalb von untergeordneten Rasterkomponenten verwenden können, was diese Lösung in einer Welt sehr nützlich macht, in der Subgrid existiert. Ein im content platziertes Element – ​​selbst wenn es innerhalb von Unterrastern verschachtelt ist – wird mit einem Element ausgerichtet, das als direktes untergeordnetes Element des Hauptrasters platziert ist.

In diesem nächsten Beispiel habe ich zwei Elemente direkt im div mit der Klasse full-2 verschachtelt. Ich habe auch eine ul in .content . Wenn wir uns die Elemente in full-2 ansehen, müssen wir, um diese auf dem übergeordneten Grid zu platzieren, den Selektor full-2 zu einem Grid mit display: grid machen und dann die Eigenschaft grid-template-columns mit dem Wert subgrid verwenden .

Dies bewirkt, dass das Grid auf .full-2 die im übergeordneten Grid definierten Spuren verwendet und Zugriff auf die dort definierten benannten Linien hat. Da es sich um ein Element in voller Breite handelt, verhält es sich in Bezug auf die Platzierung unserer Elemente genau wie das übergeordnete Raster. Wir können dann jeden der Namen verwenden, die wir für die verschiedenen Spalten definiert haben, um die Elemente zu platzieren. In diesem Fall habe ich beide untergeordneten Elemente auf grid-column: center gesetzt und sie werden nacheinander in diesem mittleren Bereich angezeigt.

 .full-2 { grid-row: 4; grid-column: full; display: grid; row-gap: 10px; grid-template-columns: subgrid; } .full-2 > div { background-color: rgb(124,222,220); grid-column: center; } 

Wenn wir uns unsere verschachtelte ul in .content , müssen wir wie im letzten Beispiel ein Unterraster auf dem Selektor .content erstellen; Wenn wir dies tun, fällt die ul in die erste Spur des Subgrids. Wenn wir die Listen-Elemente auf dem Subgrid anordnen wollen, müssen wir zwei Dinge tun: dafür sorgen, dass das ul den gleichen Bereich wie sein übergeordnetes Element einnimmt, indem wir es mit grid-column: content platzieren und es dann zu einem Grid machen, das ist ein Untergitter.

Danach werden die Listenelemente mithilfe der automatischen Platzierung in den Spaltenspuren des Unterrasters angeordnet:

 .content { grid-row: 1; grid-column: content; display: grid; grid-template-columns: subgrid; } .content ul { grid-column: content; display: grid; row-gap: 10px; grid-template-columns: subgrid; } 

Sobald Sie Ihr Raster haben, können Sie die Namen des übergeordneten Elements auf genau die gleiche Weise wie zuvor verwenden.

 .content li:nth-child(1) { grid-column: center; } .content li:nth-child(2) { grid-column: start-half; } .content li:nth-child(3) { grid-column: end-half; } .content li:nth-child(4) { grid-column: content; } 

Wenn Sie Firefox Nightly haben, können Sie die vollständige Demo in diesem CodePen-Beispiel sehen:

Sie können Unterraster wie folgt in Ihrer Markup-Struktur „verschachteln“, und jedes Mal werden die Zeilennamen durchlaufen. Dies ist eine Funktion, die ich für besonders nützlich halte.

Wenn Sie ein Unterraster erstellen, entsprechen die Zeilennummern den Zeilen des Unterrasters und nicht dem übergeordneten Raster. Wenn Sie also sicherstellen möchten, dass Elemente im Unterraster mit dem übergeordneten Raster ausgerichtet sind, wird dies durch die Verwendung von Liniennamen oder benannten Bereichen (wie in diesem Beispiel gezeigt) einfach und logisch.

Einpacken

Sie wissen jetzt, wie Sie diese Technik für Ihr Hauptraster verwenden, und hoffentlich wird es nicht allzu lange dauern, bis wir die Unterstützung für Subgrids in allen Browsern sehen. Es wird Techniken wie diese ermöglichen und es für uns unglaublich leistungsfähig machen.