CSS Grid Naming

Wenn Sie zum ersten Mal lernen, wie Sie das Rasterlayout verwenden, können Sie zunächst Elemente nach Zeilennummern auf dem Raster platzieren. In diesem Fall muss überwacht werden, wo bestimmte Zeilen im Raster angezeigt werden. Beachten Sie, dass die Reihenfolge ihrer Nummern umgekehrt ist, wenn die Site für Sprachen angezeigt wird, die von rechts nach links geschrieben sind.

Basierend auf diesem Liniensystem arbeiten Techniken, die es ermöglichen, Linien und sogar Gitterbereiche zu benennen. Mithilfe dieser Techniken können Sie Objekte nach Namen und nicht nach Nummern sortieren. In diesem Artikel werde ich die verschiedenen Arten der Benennung von Linien und Bereichen in CSS-Grid-Layouts sowie einige interessante Funktionen, die sie erstellen, genauer betrachten.

---

Vom Übersetzer:
Ein Artikel vor zwei Jahren (2017), der jedoch die wichtige Funktionsweise des CSS-Gitters anspricht und daher heute nützlich und relevant erscheint.

Linienbenennung

Beginnen wir mit der Benennung der Gitterlinien. Im folgenden Beispiel gibt es ein Raster mit sechs expliziten Spaltenspuren und einer expliziten Linienspur. Elemente werden mit Zeilennummern auf dem Raster platziert.

.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; } 

Bei Bedarf können in der Titelliste Zeilennamen in eckigen Klammern angegeben werden. Es ist wichtig, sich daran zu erinnern, dass Sie die Linie benennen, nicht die Spur, die ihr folgt. Nachdem Sie die Linien benannt haben, können Sie beim Positionieren von Elementen im Raster deren Namen anstelle von Zahlen verwenden.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } 

Der Name kann etwas anderes als das span Schlüsselwort sein. Aus Gründen, die Sie später in diesem Artikel erfahren werden, ist die Benennung mit dem Suffix -start für führende Zeilen (es spielt keine Rolle, ob es sich um eine Zeilen- oder Spaltenzeile handelt) und -end für -end eine gute Vorgehensweise. Das Ergebnis sollte main-start und main-end oder sidebar-start und sidebar-end .

Ziemlich oft stimmen die Endlinie eines Teils des Rasters und die Startlinie des anderen Teils überein, aber dies ist kein Problem, da Linien mehrere Namen haben können. Sie können Zeilen mit mehreren Namen angeben, indem Sie sie durch ein Leerzeichen in eckigen Klammern einfügen.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; } 

Dieses Beispiel zeigt, dass Sie nicht jede einzelne Gitterlinie benennen müssen und dass Zeilennummern, die zusätzlich zu Namen verwendet werden können, immer verfügbar sind.

Codepen 1. Line Naming

Linien mit dem gleichen Namen.

Wir haben gesehen, wie Zeilen mehrere Namen haben können, aber es gibt auch Situationen, in denen mehrere Zeilen denselben Namen haben. Dies geschieht, wenn Sie die Funktion repeat() verwenden und benannte Zeilen in die Titelliste aufnehmen. Im folgenden Beispiel werden sechs benannte Zeilen erstellt, die abwechselnd die Namen col-a-start und col-b-start .

 .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); } 

Wenn Sie beim Positionieren eines Elements col-a-start angeben, wird es in der ersten Zeile platziert, die mit dem Namen col-a-start (im betrachteten Beispiel die erste Gitterlinie). Wenn Sie beim Positionieren eines Elements col-b-start angeben, wird es nach demselben Prinzip auf der zweiten Rasterlinie platziert.

Wenn Sie in nachfolgenden Zeilen positionieren müssen, fügen Sie nach dem Namen eine Zahl ein, um anzugeben, in welcher Zeile der Zeile mit demselben Namen das Objekt platziert werden soll

 .box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; } 

Codepen 2. Linien mit dem gleichen Namen.

In der Spezifikation wird dieses Verhalten als "Erstellen eines benannten Satzes von Rasterlinien" beschrieben.

Speichern von Liniennamen beim Wiederherstellen eines adaptiven Rasters

Verwenden Sie die Zeilennummern oder deren Namen, Sie entscheiden. In der Regel können Linien in Situationen nützlich sein, in denen Sie die Gitterstruktur im Rahmen einer Medienabfrage ändern möchten. Anstatt zu verfolgen, auf welcher Linie Sie Elemente an verschiedenen Kontrollpunkten platzieren, können Sie auch mit nacheinander benannten Linien arbeiten.

Im folgenden einfachen Beispiel definiere ich Rasterspalten für einen schmalen Bildschirm und definiere sie dann mit einer Breite von 550px neu.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } } 

Codepen 3. Benennen von Dingen: Definieren Sie die Position der benannten Zeilen neu

Benannte Regionen

Vorher haben wir nur benannte Zeilen betrachtet, aber es gibt einen anderen Weg. Wir können Gitterbereiche benennen.

Ein Gitterbereich ist ein rechteckiger Bereich, der aus einer oder mehreren Gitterzellen besteht. Der Bereich wird durch vier Gitterlinien definiert, die die Start- und Endzeilen für Spalten und Zeilen angeben.


Wir benennen die Gitterbereiche mit der Eigenschaft grid-template-areas . Diese Eigenschaft beschreibt das Layout in Form einer ASCII-Tabelle und ist ein Satz von Linien, von denen jede eine separate Linienspur des Rasters beschreibt.

 .grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Die Namen, die wir in den Zeilen der Eigenschaft grid-template-areas werden den direkten untergeordneten Elementen des Rasters mithilfe der Eigenschaft grid-area zugewiesen. Der Wert dieser Eigenschaft ist, wenn sie zur Benennung verwendet wird, die sogenannte Benutzerkennung , sodass sie nicht in Anführungszeichen eingeschlossen werden muss

 .header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; } 

Damit der Bereich bei der Beschreibung der Gitterstruktur mit der Eigenschaft grid-template-areas mehr als eine Zelle abdeckt, müssen Sie den Bezeichner mehrmals entlang einer Zeile oder Spalte neu aufzeichnen. Der erstellte Bereich muss ein Rechteck sein. L- und T-förmige Bereiche sind nicht zulässig. Sie können auch nur einen rechteckigen Bereich für jeden Namen erstellen - nicht verbundene Bereiche sind nicht zulässig. Die Spezifikation stellt fest, dass:

„In zukünftigen Versionen dieses Moduls sind möglicherweise nicht rechteckige oder nicht verbundene Bereiche zulässig.“
- Eigenschaftenraster-Vorlagenbereiche

Bei der Beschreibung eines Rasters muss auf die vollständige Darstellung geachtet werden, da sonst die gesamte Anzeige als ungültig verworfen wird. Dies bedeutet, dass jede Gitterzelle gefüllt sein muss.

 grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Da Sie möglicherweise einige Zellen im Markup leer lassen möchten, definiert die Spezifikation ein Punktsymbol . oder eine Folge von Punkten ohne Leerzeichen zwischen ihnen .... als Markierung einer leeren Zelle

 grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; } 

Codepen 4. Benannte Regionen

Wenn Sie Firefox noch nicht heruntergeladen haben, um die neuesten Funktionen von Firefox DevTools Grid Inspector zu nutzen, empfehle ich dies, wenn Sie mit benannten Bereichen arbeiten


Demonstration benannter Bereiche im "Grid Inspector" des Firefox-Browsers ( Original öffnen )

Benannte Linien bilden Bereiche

Nun kommen wir zu dem interessanten Teil dieses ganzen Namensfestes. Sie erinnern sich vielleicht, dass ich bei der Betrachtung der benannten Zeilen vorgeschlagen habe, eine Zeilenende-Vereinbarung zu verwenden, die den Beginn des Bereichs mit -start und das Ende des Bereichs mit -start . Der Grund dafür ist, dass Sie, wenn Sie die Linien auf diese Weise benennen, einen Gitterbereich mit diesem Namen erhalten und ein Element darin einfügen können, indem Sie diesen Namen über die grid-area festlegen.

Im folgenden Beispiel bezeichne ich für Zeilen und Spalten die Zeilen panel-start und panel-end . Dies gibt mir einen benannten Bereich namens Panel. Wenn ich es als Wert der Eigenschaft grid-area für ein Element auf der Seite festlege, wird das Element in den durch diese Linien definierten Bereich eingefügt

 .grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; } 

Codepen 5. Bereiche, die aus benannten Linien gebildet werden

Linien werden aus benannten Bereichen gebildet

Wir können auch das Gegenteil von dem tun, was oben gezeigt ist, indem wir Linien verwenden, die aus benannten Bereichen erstellt wurden. Jeder Bereich erstellt vier benannte Zeilen mit derselben Suffixkonvention wie -start und -start . Wenn es einen benannten Bereich mit dem Namen main , werden seine Start- und Endzeilen und Spaltenzeilen als main-start und main-end . Diese benannten Linien können zum Positionieren eines Elements verwendet werden.

Im folgenden Beispiel positioniere ich das Panel anhand der Namen dieser automatisch generierten Zeilen:

 .grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; } 

Codepen 6. Linien bilden sich aus benannten Bereichen

Zeilennamen, die dem Regionsnamen entsprechen

Zusätzlich zu Linien mit den -end -start und -start -end Linien für die Flächen aller Rasterregionen mit dem Namen dieser Region erstellt. Wenn es also einen main gibt, können Sie den main als Wert für die Eigenschaften grid-row-start oder grid-column-start verwenden. Der Inhalt befindet sich am Anfang dieses Bereichs. Wenn Sie diesen Wert für die Eigenschaft grid-row-end oder grid-column-end , wird die Endzeile dieses Bereichs ausgewählt. Im folgenden Beispiel .panel ich das Element .panel für Spalten vom Anfang des main zum Ende des main und für Zeilen vom Anfang des main zum foot

 .panel { grid-column: main; grid-row: main / foot ; } 

Codepen 7. Zeilennamen, die dem Namen der Region entsprechen

Erklärung der Netzflächeneigenschaften

Es ist nützlich, etwas über die grid-area zu wissen. Im Wesentlichen beschreiben wir bei der Verwendung von grid-area mit einem Bezeichner wie main alle vier Linien des Areals. Gültige Werte für die grid-area sind auch Zeilennummern.

 .main { grid-area: 2 / 1 / 4 / 3; } 

Dies hat den gleichen Effekt wie der Eintrag:

 .main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; } 

Wenn du fragst

 .main { grid-area: main; } 

Das heißt eigentlich:

 .main { grid-area: main / main / main / main ; } 

Die Eigenschaft grid-area verhält sich etwas anders, wenn anstelle einer Zeilennummer eine Benutzer-ID verwendet wird. Wenn Sie Zeilennummern für Anfangswerte in der Eigenschaft grid-area , wird jede nicht angegebene Endzeilennummer automatisch auf auto . Daher wird durch die automatische Positionierung bestimmt, wo das Element platziert werden soll.

Wenn Sie jedoch eine Benutzer-ID verwenden und einige Zeilen überspringen, werden diese wie folgt festgelegt

Drei Zeilennamen angegeben

 .main { grid-area: main / main / main ; } 

Wenn Sie drei Zeilennamen angeben, fehlt im Wesentlichen das grid-column-end . Wenn grid-column-start eine Benutzer-ID ist, wird dieselbe ID auch für grid-column-end . Wie wir bereits gesehen haben, verwendet die -end Eigenschaft die Endfläche des main Wenn also grid-column-start und grid-column-end auf denselben Namen festgelegt sind, wird der Inhalt auf alle Spalten dieses Bereichs ausgedehnt.

Zwei Zeilennamen angegeben

 .main { grid-area: main / main ; } 

Wenn nur zwei Namen angegeben werden, werden die Anfangszeilen der Zeilen und Spalten festgelegt. Wenn grid-column-start und / oder grid-row-start eine Benutzerkennung ist, werden grid-column-end und grid-row-end auf denselben Wert gesetzt.

Ein Zeilenname angegeben

 .main { grid-area: main ; } 

Das Festlegen eines einzelnen Liniennamens ist genau das, was Sie tun, wenn Sie den Gitterbereich auf den Hauptnamen des Bereichs festlegen. In diesem Fall werden alle vier Zeilen auf diesen Wert gesetzt.

Hinweis : Dies funktioniert sowohl für grid-column als auch für grid-row .

Diese Methode bedeutet, dass Sie eine Reihe von Spalten oder Zeilen in einem Raster festlegen können, um ein Element zu platzieren. So wie die -end Werte für die Eigenschaft grid-area auf dieselben Werte gesetzt sind wie die ursprünglichen (wenn weggelassen), verhalten sich auch die Endwerte für die Eigenschaften grid-column und grid-row . Dies bedeutet, dass Sie das Element zwischen der Start- und Endspaltenzeile des main können, indem Sie Folgendes verwenden:

 .main { grid-column: main ; } 

In dem erläuterten Breakout mit CSS-Raster habe ich gezeigt, wie mit dieser Funktion nützliche Entwurfsmuster für Bereiche in voller Größe erstellt werden, die über einen begrenzten Inhaltsbereich hinausgehen.

Ein Gitter kann viele benannte Linien haben.

All dies bedeutet, dass das Raster eine große Anzahl benannter Zeilen enthalten kann. In den meisten Fällen sollten Sie sich darüber keine Sorgen machen. Arbeiten Sie mit den Zeilen, die Sie benötigen, und ignorieren Sie die Existenz anderer.

Benennung und abgekürzte Eigenschaften von Rastern und Rastervorlagen

CSS-Gitter hat zwei Abkürzungen, mit denen Sie viele Gittereigenschaften in einer kompakten Syntax festlegen können. Persönlich scheint es mir schwierig genug zu sein, dies zu erkennen. Wenn ich dies mit anderen Entwicklern diskutiere, sind die Meinungen geteilt: Einige mögen sie, andere bevorzugen die Verwendung separater Eigenschaften. Wie bei anderen Abkürzungen sollte beachtet werden, dass die Werte von Eigenschaften, die Sie nicht verwenden, auf das Original zurückgesetzt werden

Gittervorlagen-Abkürzung: Erstellen eines expliziten Gitters

Sie können die Verknüpfung mit der Rastervorlage verwenden, um alle Eigenschaften eines expliziten Rasters gleichzeitig an einer Stelle festzulegen

 grid-template-columns grid-template-rows grid-template-areas 

Dies bedeutet, dass Sie benannte Linien und benannte Bereiche gleichzeitig definieren können. Bei Verwendung einer Eigenschaft, die benannte Bereiche und Linien kombiniert, würde ich zunächst den Wert der Eigenschaft grid-template-areas , wie im obigen Abschnitt beschrieben.

Dann möchten Sie möglicherweise Zeilennamen hinzufügen. Sie werden am Anfang und am Ende jeder Wertelinie platziert - denken Sie daran, dass jede Wertelinie eine Linienspur darstellt. Der Name oder die Namen der Linien müssen sich innerhalb der eckigen Klammern befinden, genau wie beim Benennen der Linien in der Eigenschaft grid-template-rows , und sollten sich außerhalb der Anführungszeichen befinden, die die Wertelinie umgeben, die die Linienspur definiert.

Im folgenden Beispiel habe ich zwei Zeilen genannt: Der panel-start folgt der Kopfzeile (zweite Zeile des Rasters) und das panel-end des panel-end der letzten Fußzeile (vierte Zeile des Rasters mit drei Linienspuren). Ich habe auch die Größe der Linienspur für die benannten und unbenannten Linien bestimmt, indem ich am Ende der Wertlinie, die diese Linienspur beschreibt, einen Parameter hinzufügte

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; } 

Wenn es auch notwendig ist, die Spalten zu benennen, können wir dies nicht innerhalb der Zeile tun, also müssen wir das Trennzeichen / hinzufügen und dann eine Liste von Spaltenspuren definieren. Zeilen werden so benannt, als wäre diese Liste der Wert der Eigenschaft grid-template-columns .

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

In diesem Beispiel, das Sie im folgenden Codepen sehen können, erstelle ich einen zusätzlichen Satz von Zeilen und Spalten. Diese Zeilen definieren einen Bereich namens panel , da ich die Syntax panel-start und panel-end . Auf diese Weise kann ich das Element platzieren, indem ich den panel der Eigenschaft grid-area festlege.

Auf den ersten Blick erscheint dies eher unverständlich. Hier erstellen wir also eine Liste von Spalten, die gemäß unserer oben definierten ASCII-Tabelle ausgerichtet sind. Fügen Sie optional Leerzeichen zwischen den Werten ein, um die Definition von template-areas und template-columns auszurichten.

Codepen 8. Gitter- Vorlage-Abkürzung

Gitterabkürzung: implizites und explizites Gitter

In der Spezifikation wird davon ausgegangen, dass Sie, wenn Sie ein implizites Raster separat definieren müssen, die Eigenschaft "Kurzschriftraster" anstelle der grid-template . Das Abkürzungsraster setzt alle impliziten Werte zurück, die Sie nicht festgelegt haben. Auf diese Weise können Sie die folgenden Eigenschaften festlegen und zurücksetzen

 grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow 

Für unsere Zwecke ist die Verwendung der grid identisch mit der Verwendung der grid-template , da wir eine implizite Gitterdefinition definieren. Der einzige Unterschied besteht darin, die Eigenschaften von grid-auto–* . Die grid kann entweder zum Festlegen des expliziten Gitters und zum Zurücksetzen der impliziten Eigenschaften oder zum Festlegen des impliziten Gitters und zum Zurücksetzen der expliziten Eigenschaften verwendet werden. Beides gleichzeitig zu machen, macht nicht viel Sinn

 .grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Hinweis : In der ursprünglich empfohlenen Version der CSS-Raster-Spezifikation werden durch diese Reduzierung auch die Lückeneigenschaften zwischen grid-column-gap und grid-row-gap Zellen zurückgesetzt. Dieses Verhalten wurde jedoch schließlich geändert. Browser aktualisieren dieses Verhalten, aber zum Zeitpunkt des Schreibens (Oktober 2017) kann es immer noch vorkommen, dass der Wert der Lückeneigenschaften bei Verwendung der Reduzierung auf Null zurückgesetzt wird, sodass Sie sie möglicherweise später neu definieren müssen

Welchen Ansatz verwenden?

Sie fragen sich vielleicht, welche dieser Methoden für eine bestimmte Aufgabe am besten geeignet ist? Es gibt keine strengen Regeln. Persönlich verwende ich gerne grid-template-areas für Komponenten, wenn ich in meiner Vorlagenbibliothek arbeite. Es ist praktisch, die Struktur der Komponente direkt vor Ihren Augen in CSS- und grid-template-areas zu haben, damit Sie beim Testen verschiedene Layoutoptionen ausprobieren können. Ich fand, dass es wegen einer so einfachen Bewegung der Maschenzellen wichtig ist, dass die visuelle und logische Reihenfolge der Komponentenzellen nicht gestört wird. Besucher, die über die Tastatur mit Ihrer Site interagieren und mit der Tabulatortaste zwischen den Elementen wechseln, wählen die Elemente in der Reihenfolge aus, in der sie im Markup definiert sind. Denken Sie daran, das Layout neu zu ordnen, sobald Sie sich für die am besten geeignete Art der Anzeige Ihres Inhalts entschieden haben. Um mehr über dieses Problem zu erfahren, schlage ich vor, den Artikel über CSS-Rasterlayout und Eingabehilfen zu lesen.

Grundlegende Namenskonventionen

Um den Artikel zusammenzufassen, fasse ich ein paar Grundregeln zusammen, die Sie beim Benennen von Linien oder Bereichen in CSS Grid berücksichtigen sollten:

Linienbezeichnung:

1. Sie können fast jeden Namen verwenden (mit Ausnahme des span-Schlüsselworts), aber Sie können auch den aus diesen Zeilen erstellten Bereich verwenden, wenn deren Namen mit -start und -start enden
2. Zeilen können mehrere Namen haben, die in eckigen Klammern definiert und durch ein Leerzeichen getrennt sind
3. Mehrere Zeilen können denselben Namen haben. Wenn Sie ein bestimmtes benötigen, fügen Sie einfach die Nummer der erforderlichen Zeile nach dem Namen in der Reihenfolge hinzu

Namensbereiche:

1. Bei der Definition eines Bereichs mit grid-template-areas sollte die Form des Bereichs rechteckig sein
2. Bei Verwendung der Eigenschaft grid-template-areas wird jede Linienspur des Rasters als Zeichenfolge von Werten dargestellt und in Anführungszeichen angezeigt
3. Jede Zelle muss gefüllt sein. Wenn Sie beabsichtigt sind, einige Zellen leer zu lassen, verwenden Sie hierfür einen Punkt . oder Auslassungspunkte ... keine Leerzeichen
4. Benannte Regionen erstellen Linien mit demselben Namen wie die Region, jedoch mit den -end -start und -start . Sie können zum Positionieren von Elementen verwendet werden.