Grid-Zeile | CSS-Tricks

CSS Almanac → Eigenschaften → G → grid-row

Mojtaba Seyedi am 26. Okt 2022

Die CSS-Eigenschaft grid-row ist eine Kurzschreibweise, die die Zeilengitterlinien angibt, an denen ein Gitterelement in einem Gitterlayout beginnt und endet, und dies in einer einzigen Deklaration tut.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-row: 2 / 4; /* Starts on the second row line and ends on the fourth row line */
}

Aufgrund des standardmäßigen automatischen Platzierungsverhaltens von CSS Grid würde das zweite Kindelement des Gitters in diesem Beispiel normalerweise in der ersten Zeile der zweiten Spalte des Gitters platziert werden. Wir deklarieren jedoch eine grid-row und setzen sie so, dass die Startkante des Gitterelements mit der zweiten Gitterlinie und die Endkante mit der vierten Gitterlinie ausgerichtet wird, was das Gitterelement verschiebt.

Position und Größe des zweiten Gitterelements mit der CSS-Eigenschaft `grid-row` festlegen

Bestandteileigenschaften

Wie erwähnt, ist die Eigenschaft grid-row eine Kurzschreibweise, die zwei Eigenschaften kombiniert

Almanac am 18. Okt 2022

grid-row-start

.element { grid-row-start: 2; }

Mojtaba Seyedi

Almanac am 18. Okt 2022

grid-row-end

.element { grid-row-end: 3; }

Mojtaba Seyedi

Syntax

grid-row: <grid-line> [ / <grid-line> ]?

Vollständige Definition

<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

Anfangswert: auto
Gilt für: Gitterelemente und absolut positionierte Boxen, deren enthaltender Block ein Gittercontainer ist.
Vererbt: nein
Berechneter Wert: wie für seine Longhand-Eigenschaften angegeben.
Animationstyp: diskret

Diese Eigenschaft kann zwei Werte annehmen, die durch einen Schrägstrich (/) getrennt sind. Der Wert vor dem Schrägstrich setzt die Eigenschaft grid-row-start, während der Wert nach dem Schrägstrich die Eigenschaft grid-row-end setzt. Sie können einen einzelnen Wert ohne Schrägstrich deklarieren, der für die Eigenschaft grid-row-start gilt, und die Eigenschaft grid-row-end auf auto setzen.

Werte

/* Keyword value */
grid-row: auto;

/* <custom-ident> value */
grid-row: myLineName;
grid-row: myGridArea;
grid-row: header-start / main-end;

/* <integer> + <custom-ident> values */
grid-row: 3;
grid-row: 2 / -3;
grid-row: main 2;
grid-row: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span 2 / 5;
grid-row: 1 / span myline;
grid-row: 2 / span gridline 3;

/* Global values */
grid-row: inherit;
grid-row: initial; /* same as `auto` */
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

`auto`

Dies ist der Standardwert. Er gibt die standardmäßige Spanne (1) und das automatische Platzierungsverhalten an, was bedeutet, dass das Gitterelement automatisch in der nächsten freien Gitterzelle platziert wird.

`<custom-ident>`

Diese Syntax ermöglicht es Ihnen, entweder eine Ganzzahl zu verwenden, um auf eine nummerierte Gitterlinie zu verweisen, oder einen String, um auf eine benannte Gitterlinie oder einen benannten Gitterbereich zu verweisen. Mit anderen Worten, Sie können eine Gitterlinie nach ihrem numerischen Index oder Namen für die Start- und Endkante eines Gitterelements angeben.

Positionierung von Elementen nach Zeilennummern

Zwischen jedem Gittertrack befinden sich zwei Gitterlinien, denen automatisch eine fortlaufende Nummer ab eins zugewiesen wird.

A three by three grid of numbered rectangles. The third cell in the third row is blank. — Diese Abbildung zeigt nur den Index der Spaltengitterspuren

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um auf die zweite Gitterlinie anhand ihres Indexes (2) zu verweisen, wodurch die Startkante des Gitterelements mit der Startkante der zweiten Zeile ausgerichtet wird, während die Endkante mit der vierten Zeile unter Verwendung der <custom-ident>-Syntax ausgerichtet wird.

.grid-item:nth-child(2) {
  grid-row: 2 / 4;
}

Beachten Sie, dass Sie auch eine negative Zahl verwenden können, um sich auf eine Gitterlinie zu beziehen, diese zählt jedoch vom Ende des Gitters aus. Der folgende Code verweist auf dieselben Gitterlinien wie im vorherigen Beispiel, zählt aber rückwärts.

.grid-item:nth-child(2) {
  grid-row: -3 / -1;

  /* same as: */
  grid-row: 2 / 4;
  grid-row: 2 / -1;
  grid-row: -3 / 4;
}

Beachten Sie, dass den Spalten unseres Gitters negative und positive ganze Zahlen zugewiesen wurden.

Das Platzieren des zweiten Gitterelements in der zweiten und dritten Zeile mit der CSS-Eigenschaft `grid-row`

Positionierung von Elementen anhand von Liniennamen

Sie können einer Gitterlinie einen benutzerdefinierten Namen mit den gitterbasierten Platzierungseigenschaften grid-template-columns und grid-template-rows zuweisen, um diese Linie über ihren Namen anzusprechen.

Kehren wir zu unserem Beispiel zurück und benennen alle seine Zeilenspurlinien wie in der folgenden Deklaration

.grid {
  display: grid;
  grid-template-rows: [first] 100px [second] 100px [third] 100px [last];  
  grid-template-columns: 1fr 1fr 1fr;
}

Wir können uns mit unseren benutzerdefinierten Namen auf die zweite und vierte Linie anstatt auf ihren Index beziehen

.grid-item:nth-child(2) {
  grid-row: second / last; /* same as index numbers 2 / 4 */
}

Beachten Sie, dass <custom-ident> nicht den Wert span annehmen kann. span ist ein reserviertes Schlüsselwort für Gitterplatzierungseigenschaften (z. B. grid-row: 1 / span 2).

Positionierung von Elementen anhand von Gitterbereichen

Beim Definieren von Gitterbereichen mit der Eigenschaft grid-template-areas erhalten Sie kostenlos implizite Liniennamen, die auf dem Namen der Bereiche basieren. Zum Beispiel generiert ein Gitterbereich mit dem Namen content davor eine Linie namens content-start und danach eine namens content-end. Sie können diese Linien referenzieren, um die Position eines Gitterelements festzulegen.

.grid-item:nth-child(2) {
  grid-row: content-start / content-end;
}

Alternativ können Sie sich auf den Namen des Bereichs beziehen, um ein Element an der Start- und Endlinie des benannten Bereichs content zu positionieren.

.grid-item:nth-child(2) {
  grid-row: content;
}

Hier ist ein vollständiges Beispiel.

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;   
  grid-template-areas:
    "header"
    "content"
    "footer";
}

main {
  grid-row: content;
}

Dies setzt die Position des <main>-Elements in den content-Bereich unseres Gitters.

`<integer> && <custom-ident>?`

Diese Syntaxvariante ermöglicht es Ihnen, Gitterelemente anhand von Gitterlinien zu positionieren, wenn es wiederholte Namen gibt. Wenn Gitterlinien denselben Namen haben, hilft diese Syntax dabei, anzugeben, auf welche dieser Linien Sie sich beziehen.

.grid {
  display: grid;
  grid-template-rows: [bar] 100px [foo] 100px [bar] 150px [bar];
}

Nehmen wir an, Sie möchten die dritte Linie auswählen, aber diese Linie hat denselben Namen wie die erste und die letzte Gitterlinie – alle heißen bar. Da die *zweite* Linie mit dem Namen bar die dritte Gitterlinie ist, können Sie 2 verwenden, um sie als Startpunkt auszuwählen.

.grid-item:nth-child(2) {
  grid-row: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-row-start: 2 bar;  
  grid-row-end: auto;  
}

A single column grid wuth three rows. The second row is green and has swapped places with the third row.

Beachten Sie, dass die Reihenfolge keine Rolle spielt, sodass der vorherige Code auch so geschrieben werden kann:

.grid-item:nth-child(2) {
  grid-row: bar 2;
}

Wie bei der vorherigen Syntax können Sie auch einen negativen ganzzahligen Wert verwenden, um die Gitterlinien vom Ende des Gitters aus zu zählen. In unserem Beispiel, wenn wir uns auf die erste bar beziehen möchten, können wir vom Ende unseres Gitters aus zählen und es so schreiben:

.grid-item:nth-child(2) {
  grid-row: -3 bar;
}

Beachten Sie, dass der ganzzahlige Wert nicht null sein kann.

`span && [ <integer> || <custom-ident> ]`

Diese Syntax ermöglicht es einem Gitterelement, sich über Gittertracks zu erstrecken. Dies kann auf drei verschiedene Arten angegeben werden.

Beachten Sie, dass der Standardwert 1 ist, wenn die Ganzzahl nicht irgendwo in dieser Syntax angegeben ist.

`span <integer>`

Die Verwendung des Schlüsselworts span gefolgt von einer Ganzzahl gibt die Anzahl der Spuren an, die ein Gitterelement von einer bestimmten Gitterlinie aus überspannt. Wenn wir möchten, dass ein Gitterelement beispielsweise drei Zeilenspuren bis zu seiner Endkante überspannt, können wir den folgenden Wert anwenden

.grid-item:nth-child(2) {
  grid-row: 1 / span 3;
}

A three by four grid of rectangles. The first three rows in the second column are selected. — Das Gitterelement überspannt drei Zeilen mit der CSS-Eigenschaft `grid-row`.

`span <custom-ident>`

Es ist auch möglich, das Schlüsselwort span mit dem Namen einer Gitterlinie zu kombinieren, damit sich das Gitterelement bis zu dieser angegebenen Gitterlinie erstreckt.

.grid-item:nth-child(3) {
  grid-row: 3 / span lastline;
}

Da die Startlinie des Gitterelements bekannt ist (3), können wir das Element überspannen, bis es eine Gitterlinie namens lastline erreicht.

A three by five grid with the last three rows in the first column selected. — Das Gitterelement überspannt das Gitter, bis es die angegebene Gitterlinie namens `lastline` erreicht, mit der CSS-Eigenschaft `grid-row`.

`span <custom-ident> <integer>`

Wenn der angegebene Gitterlinienname mehr als einer Gitterlinie zugewiesen ist – mit anderen Worten, wenn wir wiederholte benannte Gitterlinien haben – müssen wir angeben, welche wir ansprechen möchten. Dazu können wir unserer Wert eine Ganzzahl hinzufügen, die angibt, auf welche Gitterlinie wir uns beziehen.

Nehmen wir das folgende Gitter als Beispiel.

.grid-container {
  display: grid;
  grid-template-rows: [y] 50px [x] 50px [x] 50px [y] 50px [x] 50px [x];
  grid-template-columns: 1fr 1fr;
}

.grid-item:nth-child(2) {
  grid-row: 2 / span x 2; /* equivalent to grid-row-end: 5; */
}

Wir setzen die Startlinie des Gitterelements auf die zweite Linie. Dann möchten wir, dass es sich nach vorne überspannt, bis es eine Gitterlinie namens x erreicht. Und da wir möchten, dass es die zweite x-Gitterlinie ist, landen wir bei span x 2.

Als Ergebnis überspannt unser Gitterelement die zweite Linie, wie unten dargestellt. Die erste Linie, die es trifft, ist die erste x, gefolgt von y und schließlich trifft es die gewünschte zweite Linie, genannt x.

A two by five grid. The middle three rows in the first column are selected. — Festlegen der Position eines Gitterelements von der zweiten Linie bis zur zweiten benannten Linie `x` mit der CSS-Eigenschaft `grid-row`.

Diese Syntax ist hilfreich, wenn Sie ein Gitterelement über eine Gitterlinie unter Verwendung ihres Namens überspannen möchten. Sie sind sich jedoch bewusst, dass es mehr als eine Gitterlinie mit demselben Namen gibt. Mit dieser Methode fügen wir eine Ganzzahl hinzu, um anzugeben, dass wir die N-te Gitterlinie davon wünschen.

Weitere Informationen und Beispiele zur Syntax dieser einzelnen Eigenschaften finden Sie unter grid-row-start und grid-row-end.

Beispiele

Betrachten wir einige verschiedene Szenarien, in denen grid-row verwendet werden kann.

Schwebendes Balkendiagramm

Viele von uns denken normalerweise an CSS Grid als ein Werkzeug zur Erstellung der Hauptstruktur und des Layouts einer Webseite oder Anwendung, aber CSS Grid kann viel mehr als das.

Nehmen Sie das folgende Diagramm als Beispiel. Wenn Sie genau hinschauen, sehen Sie, dass jeder Balken von einer bestimmten Zeile zu einer anderen überspannt, um den Bereich anzuzeigen, der im Diagramm markiert werden soll.

A bar chart with bars that span single columns and various numbers of rows, like a calendar weekly view. — Demonstration eines schwebenden Balkendiagramms mit Balken, die sich über Zeilen erstrecken

Wenn Sie das Diagramm als Gitter betrachten, sehen Sie, wie einfach Sie die Größe und Position der Balken mit den CSS Grid-Platzierungseigenschaften festlegen können.

A bar chart with bars that span single columns and various numbers of rows, like a calendar weekly view. The grid lines are shown. — Ein Gitter mit Balkendiagrammen in seinen Spalten, deren Position mit der CSS-Eigenschaft `grid-row` festgelegt ist

Um ein Gitter für dieses Diagramm zu erstellen, können Sie den folgenden Code schreiben

.chart {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(9, 40px);
  gap: 0 8px;
}

Jetzt müssen wir alle Balken in die richtigen Zeilen und Spalten einfügen

.bar:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bar:nth-child(2) {
  grid-column: 2;
  grid-row: 5 / 10;
}

/* ... */

.bar:nth-child(10) {
  grid-column: 10;
  grid-row: 9 / 10;
}

Schauen Sie sich die Demo an und sehen Sie, wie der Rest zusammenkommt

Stapeln von Gitterelementen

Beim Positionieren von Elementen im Gitter können wir sie stapeln oder übereinander legen. Dies gibt uns die Möglichkeit, CSS Grid manchmal als Alternative zur absoluten Positionierung zu verwenden. Zum Beispiel können wir eine Beschriftungsebene über ein Bild legen, ohne die Eigenschaft position zu verwenden, wie unten gezeigt.

<figure>
  <img src="image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>

figure {
  display: grid;
}

img,
figcaption {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

Hier ist, was wir bekommen

Cabin in the woods with a green to blue gradient overlay and the words the caption of our image on top.

Standardmäßig stapeln sich Gitterelemente in der Quellreihenfolge, aber Sie können ihre Ebene mit der Eigenschaft z-index steuern. Im folgenden Beispiel überlappen wir einige Elemente und verwenden die Eigenschaft z-index, um das zweite Element auf die höchste Ebene im Stapelkontext zu bringen.

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}

Four overlapping grid items in a five-by-five grid. — Das zweite Gitterelement mit der CSS-Eigenschaft `z-index` an den oberen Rand des Stapels bringen

Barrierefreiheit (Accessibility)

Ein wichtiger Hinweis bei der Verwendung der Gitterplatzierungseigenschaften ist das Problem, das durch das Ändern der Reihenfolge der Elemente entsteht. Wenn Sie die Position eines Elements ändern, ändert sich nur die visuelle Reihenfolge der Gitterelemente, und diese Reihenfolge stimmt möglicherweise nicht mit der ursprünglichen Dokumentreihenfolge überein. Dies kann zu einer sehr schlechten Erfahrung für jemanden führen, der mit der Tastatur durch das Dokument tabliert oder einen Screenreader verwendet, der den Inhalt in der gleichen Reihenfolge wie das HTML liest.

Vermeiden Sie es daher, die Reihenfolge von Gitterelementen zu ändern, wenn die HTML-Reihenfolge der Elemente wichtig ist. Zum Beispiel kann dies für eine zufällige Bildergalerie gut sein, aber vielleicht nicht so sehr für Ihre Formulareingaben.

Zum Zeitpunkt der Verfassung dieses Textes gibt es einen Vorschlag, dieses Problem anzugehen, der dieses Problem hoffentlich in Zukunft lösen wird.