Grid-row-end | CSS-Tricks

CSS Almanac → Eigenschaften → G → grid-row-end

Mojtaba Seyedi am 18. Okt. 2022

Die CSS-Eigenschaft grid-row-end ist Teil der CSS Grid Layout Spezifikation und wird verwendet, um die Zeilenrasterlinie anzugeben, an der ein Gitterelement in einem Gitterlayout endet. Diese Eigenschaft – neben anderen linienbasierten Platzierungs-Gitter-Eigenschaften – steuert die Größe eines Gitterelements und dessen Position auf dem Gitter.

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-item:nth-child(2) {
  grid-row-end: 3; /* Item ends on the third row line */
}

Basierend auf dem standardmäßigen Auto-Placement-Verhalten von CSS Grid sollte das zweite Kindelement des Gitters in diesem Beispiel in der ersten Zeile und der zweiten Spalte platziert werden. Wir haben jedoch eine grid-row-end-Position an der Rasterlinie der zweiten Zeile deklariert, wodurch das Gitterelement in die zweite Zeile verschoben und seine Endkante mit der Rasterlinie der dritten Zeile ausgerichtet wird.

Three by three grid of white rectangles on an orange background. The first item in the second row is green and numbered two. — Verschieben des zweiten Gitterelements in die zweite Zeile mit der CSS Grid-Eigenschaft `grid-row-end`.

Syntax

grid-row-end: <grid-line>

Vollständige Definition

where
<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 angegeben
Animationstyp: diskret

Werte

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

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

/* <integer> + <custom-ident> values */
grid-row-end: 3;
grid-row-end: -2;
grid-row-end: main-area 2;
grid-row-end: 3 product-end;

/* span + <integer> + <custom-ident> values */
grid-row-end: span 3;
grid-row-end: span main;
grid-row-end: span myarea 5;

/* Global values */
grid-row-end: inherit;
grid-row-end: initial; /* same as `auto` */
grid-row-end: revert;
grid-row-end: revert-layer;
grid-row-end: 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 Rasterlinie zu verweisen, oder einen String, um auf eine benannte Rasterlinie oder einen benannten Rasterbereich zu verweisen. Mit anderen Worten, Sie können eine Rasterlinie durch ihren numerischen Index oder Namen für die 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.

Three by three grid of white rectangles against an orange background. — Diese Abbildung zeigt nur den Index von Zeilenrasterspuren

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um auf die dritte Rasterlinie nach ihrem Index (3) zu verweisen, um die Endkante des Gitterelements mit der Endkante der zweiten Zeile mithilfe der <custom-ident>-Syntax auszurichten.

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

Beachten Sie, dass Sie auch eine negative Zahl (z. B. -1) verwenden können, um auf eine Rasterlinie zu verweisen. Denken Sie jedoch daran, dass sie ab dem Ende des Rasters gezählt wird. Der folgende Code verweist auf dieselbe Rasterlinie wie im vorherigen Beispiel, zählt aber rückwärts.

.grid-item:nth-child(2) {
  grid-row-end: -2; /* same as 3 */
}

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

Positionierung von Elementen anhand von Liniennamen

Sie können einer Rasterlinie einen benutzerdefinierten Namen mit grid-template-columns und grid-template-rows zuweisen und linienbasierte Platzierungs-Gitter-Eigenschaften verwenden, um auf diese Linie nach ihrem Namen zu verweisen.

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 an die dritte Linie mit unserem benutzerdefinierten Namen anstelle ihres Index wenden

.grid-item:nth-child(2) {
  grid-row-end: third; /* same as index number 3 */
}

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

Positionierung von Elementen anhand von Gitterbereichen

Wenn Sie Gitterbereiche mit der Eigenschaft grid-template-areas definieren, erhalten Sie kostenlos implizite Zeilennamen, basierend auf dem Namen der Bereiche. Zum Beispiel generiert ein Gitterbereich mit dem Namen header davor eine Zeilennamen header-start und danach eine header-end. Sie können auf diese Linien verweisen, um die Position eines Gitterelements festzulegen.

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

Alternativ können Sie auf den Namen des Bereichs verweisen, um ein Element an der Endlinie des benannten Bereichs header zu positionieren.

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

Da Sie in diesem Beispiel die Eigenschaft grid-row-end verwenden, versteht der Browser, dass Sie die Zeile header-end des Bereichs header meinen; daher wird die Endkante des Gitterelements mit der Endkante des Gitterbereichs ausgerichtet.

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"
    "main"
    "footer";
}

header {
  grid-row-end: header;
}

Dies legt die Position des <header>-Elements auf den header-Bereich in unserem Gitter fest.

`<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 vierte Linie auswählen, aber diese Linie hat denselben Namen wie die erste und die dritte Gitterlinie – alle heißen bar. Da die *dritte* Linie mit dem Namen bar die vierte Gitterlinie ist, können Sie 3 verwenden, um sie als Endpunkt auszuwählen.

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

A single column layout of white rectangles with three rows. The second item is placed in the third row and is green.

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

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

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-end: -3 bar;
}

Beachten Sie, dass der Ganzzahlwert nicht Null sein kann, da Linien Nicht-Null-Werte zugewiesen bekommen.

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

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

Wenn die Ganzzahl in dieser Syntax nirgends angegeben ist, ist der Standardwert 1.

`span <integer>`

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

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

A three by four grid where the second item is green, in the second column, and spans the first three rows. — Das Gitterelement erstreckt sich über drei Zeilen mit der CSS-Eigenschaft `grid-row-end`.

`span <custom-ident>`

Sie können span mit einem Namen einer Gitterlinie kombinieren, damit sich das Gitterelement ausdehnt, bis es diese angegebene Gitterlinie erreicht.

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

Da die Startlinie des Gitterelements bekannt ist (3), können wir das Element in Richtung der Endlinie spannen, bis es eine Gitterlinie namens lastline erreicht.

Das Gitterelement erstreckt sich über das Gitter, bis es die angegebene Gitterlinie namens lastline mit der Eigenschaft `grid-row-end` erreicht.

`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-item:nth-child(2) {
  grid-row-start: 2;
  grid-row-end: 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 nach unten gespannt wird, bis es eine Gitterlinie namens x erreicht. Und da wir möchten, dass es die zweite x-Gitterlinie ist, erhalten wir grid-row-end: span x 2.

Als Ergebnis beginnt unser Gitterelement, sich von der zweiten Linie in Richtung der Endlinie zu spannen, wie unten dargestellt. Die erste Linie, auf die es trifft, ist die erste x, dann folgt eine mit dem Namen y, und schließlich trifft es die gewünschte zweite Linie namens x.

A two-by-five layout where the second item is green, in the first column and spans the second, third, and fourth rows. — Festlegen der Position eines Gitterelements von der zweiten Linie zur zweiten Instanz einer Linie namens `x` mit der CSS Grid-Eigenschaft `grid-row-end`.

Diese Syntax ist hilfreich, wenn Sie ein Gitterelement über eine Gitterlinie mit ihrem Namen spannen möchten, aber wissen, dass es mehr als eine Gitterlinie mit diesem Namen gibt. Daher fügen wir eine Ganzzahl hinzu, um anzugeben, dass wir die N dieser Gitterlinie möchten.

Positionierung von Gitterelementen kann implizite Spuren erzeugen

Die Positionierung eines Gitterelements auf eine Gitterlinien-Index oder einen Gitterlinien-Namen, der in einem expliziten Gitter nicht existiert, zwingt das Gitter, implizite Spuren zu erstellen, um diese Position zum Gitter hinzuzufügen.

Erstellen wir ein Gitter mit zwei Zeilen und positionieren dessen Element auf nicht existierende Linien. Im folgenden Beispiel haben wir nur zwei Zeilen und keine unserer Gitterlinien benannt. Es gibt also keine Linie mit dem Index 5 und keine Linie mit dem Namen test, aber wir setzen diese Werte in unsere Eigenschaften.

.grid {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-auto-rows: 100px;
}

.grid-item {
  grid-row-start: span test;
  grid-row-end: 5;
}

Da wir wissen, dass es implizite Spuren in unserem Gitter gibt und wir möchten, dass sie eine Größe haben, damit wir sie sehen können, fügen wir die Eigenschaft grid-auto-rows unserem Code hinzu.

Jetzt, da wir alles eingerichtet haben, sehen wir, was mit unserem Gitter passiert.

A single column layout with five grid tracks, two of which are implicit. — Wenn Gitterplatzierungs-Eigenschaften Werte zugewiesen werden, die nicht existieren, erstellt das Gitter implizite Spuren, um unser Gitterelement positionieren zu können.

Wir setzen grid-row-end auf 5, aber der letzte Index unseres expliziten Gitters ist 3. Aus diesem Grund werden zwei implizite Spuren am Ende des Gitters erstellt, um uns implizite Linien mit den Indizes 4 bzw. 5 zu geben, an denen sich das Element ausrichten kann.

Auf der anderen Seite, sagen wir, wir setzen grid-row-end auf eine Gitterlinie namens test. Da wir keinen solchen Namen in unserem Gitter haben und wir möchten, dass diese Gitterlinie an der Startkante unseres Gitterelements ausgerichtet wird, wird eine implizite Zeilenspur auf der Startseite des expliziten Gitters in Blockrichtung erstellt, und ihre Linie wird test genannt.

Positionierung von Gitterelementen kann Lücken in der Darstellung verursachen

Wie Sie in den vorherigen Beispielen gesehen haben, kann die linienbasierte Platzierung leere Räume zwischen Gitterelementen verursachen. Sie können diese vermeiden, indem Sie die Eigenschaft grid-auto-flow mit dem Wert dense auf den Gittercontainer anwenden.

Comparing two grid layouts where the first contains gaps between items and the second has no gaps. — Die CSS-Eigenschaft `grid-auto-flow` kann durch linienbasierte Platzierung entstandene Lücken füllen.

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-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;  
}

Hier ist, was wir bekommen

Square photo of a cabin in the woods with a subtle fog behind it. A light gradient overlay is on top that goes from aqua to purple, and on top of that is a caption in white text. — Stapeln von Elementen übereinander mit CSS Grid-Platzierungs-Eigenschaften.

Standardmäßig werden Gitterelemente in der Quellreihenfolge gestapelt, 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 zu bringen.

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

A grid of four numbered overlapping rectangles flowing from the top-left of the container to the bottom-right. The second item is on top of the stack. — Das zweite Gitterelement mithilfe der CSS-Eigenschaft `z-index` an den Anfang des Stapels bringen.

Verwendung eines negativen Index für mehr Flexibilität

Es gibt Fälle, in denen Sie ein Element mit voller Höhe in Ihrem Gitter wünschen, was bedeutet, dass es von der ersten Gitterlinie ausgeht und bis zur letzten reicht. Zum Beispiel ist bei einem Gitter mit vier Zeilen der Index der Endlinie 5. Sie können also den folgenden Code schreiben, um Ihr Element mit voller Höhe zu erhalten.

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, min-content);
}

.grid-item.full-height {
  grid-row-start: 1;
  grid-row-end: 5;
}

Das funktioniert wie erwartet, aber was ist, wenn sich die Anzahl der Zeilen auf sechs ändert? In diesem Fall müssen wir den Indexwert für die Platzierungseigenschaft aktualisieren.

.grid-container {
  display: grid;
  grid-template-rows: repeat(5, min-content);
}

.grid-item.full-height {
  grid-row-start: 1;
  grid-row-end: 6;
}

Die flexiblere Lösung ist jedoch die Verwendung des negativen Index!

.grid-item.full-height {
  grid-row-start: 1;
  grid-row-end: -1;
}

Nun erstreckt sich das Gitterelement mit der Klasse .full-height immer über das Gitter, unabhängig davon, wie viele Zeilen wir zum Gittercontainer hinzufügen oder daraus entfernen.

Benannter Bereich hat Vorrang vor benannter Linie

Wenn ein benannter Gitterbereich denselben Namen wie eine Linienname hat, bevorzugt der Platzierungsalgorithmus die Linien des benannten Gitterbereichs.

Betrachten Sie das folgende Beispiel

.grid {
  display: grid;
  grid-template-rows: 80px [y] 80px 80px 80px 80px;
  grid-template-areas: 
    "x"
    "x"
    "x"
    "y"
    "y";
}

Die zweite Gitterlinie heißt y, und die letzten beiden Zeilen sind als Bereich mit demselben Namen definiert. Nun weisen wir zur Positionierung des ersten Gitterelements y als Wert für grid-row-end zu. Sehen wir uns an, auf welche Linie verwiesen wird.

.grid-item:first-child {
  grid-row-end: y;
}

Wie Sie im nächsten Bild sehen können, hat der Browser zwar die Linie y näher am ersten Element gewählt, aber die Kante des Gitterbereichs, um die Endkante des Elements zu platzieren.

Single column grid with five rows. The first item is green and positioned in the last row. — Ein Gitterbereich und eine Gitterlinie haben denselben Namen `y`, und der Browser wählt die Gitterbereichslinie anstelle der benannten Gitterlinie, wenn dieser Name für Gitterplatzierungs-Eigenschaften zugewiesen wird.

Beachten Sie, dass dies nicht gilt, wenn Sie die implizite Linienbezeichnung eines Gitterbereichs verwenden. Ändern wir zum Beispiel den Namen der Gitterlinie im vorherigen Beispiel in y-end. Wir wissen auch, dass der Bereich mit dem Namen y eine implizite Gitterlinie y-end zugewiesen hat. Wenn wir nun y-end für grid-row-end festlegen, gewinnt diesmal die benannte Gitterlinie.

.grid {
  display: grid;
  grid-template-rows: 50px [y-end] 50px 50px 50px 50px;
  grid-template-areas: 
    "x"
    "x"
    "x"
    "y"
    "y";
}

.grid-item:first-child {
  grid-row-end: y-end;
}

A single column layout with five rows. The first item is in the first row and colored green. — Ein Gitterbereich und eine Gitterlinie teilen sich denselben Namen, `y`. Der Browser wählt die Gitterbereichslinie anstelle der benannten Gitterlinie, wenn dieser Name für Gitterplatzierungs-Eigenschaften zugewiesen wird.

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.