Grid-row-start | CSS-Tricks

CSS-Almanach → Eigenschaften → G → grid-row-start

Mojtaba Seyedi am 18. Okt. 2022

Die CSS-Eigenschaft grid-row-start ist Teil der CSS Grid Layout Spezifikation und wird verwendet, um die Zeilenrasterlinie anzugeben, an der ein Grid-Element in einem Grid-Layout beginnt. Diese Eigenschaft – neben anderen linienbasierten Platzierungseigenschaften für Grids – steuert die Größe eines Grid-Elements und seine Position im Grid.

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

.grid-item:nth-child(2) {
  grid-row-start: 2; /* Item starts on the second row line */
}

Basierend auf dem standardmäßigen automatischen Platzierungsverhalten von CSS Grid sollte das zweite untergeordnete Element des Grids in diesem Beispiel in der ersten Zeile und der zweiten Spalte platziert werden. Wir haben jedoch eine grid-row-start Position an der zweiten Zeilenrasterlinie deklariert, wodurch das Grid-Element in die zweite Zeile verschoben und seine Startkante mit der zweiten Zeilenrasterlinie ausgerichtet wird.

A three by three grid of white numbered rectangles against an orange background. — Verschieben des zweiten Grid-Elements in die zweite Zeile mit der CSS-Eigenschaft `grid-row-start`.

Syntax

grid-row-start: <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-start: auto;

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

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

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

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

Positionierung von Elementen anhand von Liniennummern

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

Die Abbildung zeigt nur den Index der Zeilenrasterbahnen.

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um sich über ihren Index (2) auf die zweite Rasterlinie zu beziehen, um die Startkante des Grid-Elements mit der Startkante der zweiten Zeile über die <custom-ident>-Syntax auszurichten.

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

Beachten Sie, dass Sie auch eine negative Zahl (z. B. -1) verwenden können, um sich auf eine Rasterlinie zu beziehen. Denken Sie jedoch daran, dass sie vom Ende des Grids aus 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-start: -3; /* same as 2 */
}

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

A three by three grid of white numbered rectangles against an orange background. The first item in the second row is green. — Verschieben des zweiten Grid-Elements in die zweite Zeile mit der CSS-Eigenschaft `grid-row-start`.

Elemente anhand von Liniennamen positionieren

Sie können einer Rasterlinie einen benutzerdefinierten Namen mit grid-template-columns und grid-template-rows zuweisen und linienbasierte Platzierungseigenschaften für Grids 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 mit unserem benutzerdefinierten Namen anstelle seines Index auf die zweite Linie beziehen.

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

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).

Elemente anhand von Rasterbereichen positionieren

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

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

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

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

Da Sie in diesem Beispiel die Eigenschaft grid-row-start verwenden, versteht der Browser, dass Sie die Linie header-start des Bereichs header meinen. Daher wird die Startkante des Grid-Elements mit der Startkante des Rasterbereichs 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-start: header;
}

Dies setzt die Position des <header>-Elements auf den header-Bereich in unserem Grid.

`<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-start: 2 bar; /* The second `bar` named line which is the third line */
}

A column of three rows of white rectangles. The third item 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-start: 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-start: -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.

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

`span <integer>`

Die Verwendung des Schlüsselworts span gefolgt von einer Ganzzahl gibt die Anzahl der Bahnen an, die ein Grid-Element von einer bestimmten Rasterlinie überspannt. Wenn wir beispielsweise möchten, dass ein Grid-Element drei Zeilenbahnen in Richtung seiner Startkante überspannt, können wir den folgenden Wert anwenden.

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

Das Grid-Element überspannt drei Zeilen mit der CSS-Eigenschaft `grid-row-start`.

Wenn wir span verwenden, um die Startlinie eines Elements zu platzieren, überspannt es technisch gesehen rückwärts anstatt vorwärts zur Endlinie, was normalerweise in realen Szenarien geschieht.

`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: span thirdline;
  grid-row-end: 6;
}

Da die Endlinie des Grid-Elements bekannt ist (6), können wir das Element überspannen, bis es eine Rasterlinie namens thirdline erreicht.

A three by five grid of rectangles. The last three rectangles in the first column are green. — Das Grid-Element überspannt das Grid, bis es die angegebene Rasterlinie namens `thirdline` mit der CSS-Eigenschaft `grid-row-start` 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: span x 2;
  grid-row-end: 5; /* equivalent to grid-row-end: x 3; */
}

Wir setzen die Endlinie des Grid-Elements auf die fünfte Linie. Dann möchten wir, dass es zur Startlinie überspannt, bis es eine Rasterlinie namens x erreicht. Und da wir möchten, dass es die zweite x-Rasterlinie ist, landen wir bei grid-row-start: span x 2.

Infolgedessen beginnt unser Grid-Element ab der fünften Linie in Richtung der Startlinie zu überspannen, wie unten dargestellt. Die erste Linie, auf die es trifft, heißt y, dann die erste x, und schließlich trifft es die gewünschte zweite Linie namens x.

A two by 5 grid of white numbered rectangles. The second through fourth items in the first column are green. — Setzen der Position eines Grid-Elements von der fünften Linie zurück zur zweiten `x`-benannten Linie in Richtung der Startkante des Elements mit der CSS-Eigenschaft `grid-row-start`.

Diese Syntax ist hilfreich, wenn Sie ein Grid-Element über eine Rasterlinie mit ihrem Namen überspannen möchten, aber wissen, dass es mehr als eine Rasterlinie mit diesem Namen gibt. Daher fügen wir eine Ganzzahl hinzu, um anzugeben, dass wir die N-te dieser Rasterlinie meinen.

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 Grid mit zwei Zeilen und setzen die Position seines Elements auf nicht existierende Linien. Im folgenden Beispiel haben wir nur zwei Zeilen und haben 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 Bahnen in unserem Grid 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 zu unserem Code hinzu.

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

A single-column layout with five grid rows. — Das Zuweisen von Werten an Grid-Platzierungseigenschaften, die nicht existieren, führt dazu, dass das Grid implizite Bahnen erstellt, um unser Grid-Element positionieren zu können.

Wir setzen grid-row-end auf 5, aber der letzte Index unseres expliziten Grids ist 3. Aus diesem Grund werden zwei implizite Bahnen am Ende des Grids erstellt, um uns eine Linie mit dem Index 5 zu geben. Auf der anderen Seite setzen wir grid-row-start auf eine Rasterlinie mit dem Namen test. Da wir keinen solchen Namen in unserem Grid haben und diese Rasterlinie mit der Startkante unseres Grid-Elements ausgerichtet sein soll, wird eine implizite Zeilenbahn auf der Startseite des expliziten Grids in Blockrichtung erstellt, und ihre Linie heißt test.

Platzierung von Grid-Elementen kann Lücken im Layout verursachen

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

Two grid layouts, one showing gaps in the layout and the other without gaps due to use the grid-auto-flow CSS property's dense keyword. — Die CSS-Eigenschaft `grid-auto-flow` kann leere Räume füllen, die durch linienbasierte Platzierung entstehen.

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

A square image of a cabin in the mountains surrounded by mist with a gradient overlay that goes from aqua to purple. The caption is white and printed on top of the image overlay. — Elemente mit Grid-Platzierungseigenschaften übereinander stapeln.

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 five by five grid with four overlapping rectangles stacked diagonally from the top-left corner of the grid to the bottom-right corner. The second rectangle is on top of the stack. — Das zweite Grid-Element mit der CSS-Eigenschaft `z-index` an die Spitze 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 Grid haben möchten, d. h. es beginnt an der ersten Rasterlinie und endet an der letzten. Zum Beispiel ist in einem Grid mit vier Zeilen der Index der Endlinie 5. Sie können also den folgenden Code schreiben, um Ihr Element in voller Höhe zu haben.

.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 einwandfrei, aber was passiert, wenn die Anzahl der Zeilen auf sechs erhöht wird? In diesem Fall müssen wir den Indexwert für die Platzierungseigenschaft aktualisieren.

Die flexible Lösung ist die Verwendung des negativen Index!

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

Jetzt, egal wie viele Zeilen wir haben, das Grid-Element mit der Klasse full-height erstreckt sich immer über das Grid.

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 Rasterlinie heißt y und die letzten beiden Zeilen sind als Bereich mit demselben Namen definiert. Um das erste Grid-Element zu positionieren, weisen wir y als Wert für grid-row-start zu. Sehen wir, auf welche Linie es sich beziehen wird.

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

Wie Sie in der nächsten Abbildung sehen können, obwohl die Linie y näher am ersten Element liegt, hat der Browser die Kante des Rasterbereichs gewählt, um die Startkante des Elements zu platzieren.

A sngle-column layout with five rows containing white rectangles. The first item is in the fourth row and colored green. — Ein Rasterbereich und eine Rasterlinie haben denselben Namen, `y`, und der Browser wählt die Linie des Rasterbereichs gegenüber der benannten Rasterlinie, wenn Sie diesen Namen Grid-Platzierungseigenschaften zuweisen.

Beachten Sie, dass dies nicht gilt, wenn Sie den impliziten Namen einer Linie eines Rasterbereichs verwenden. Ändern wir zum Beispiel den Namen der Rasterlinie im vorherigen Beispiel zu y-start. Wir wissen auch, dass der Bereich mit dem Namen y eine implizite Rasterlinie y-start zugewiesen hat. Wenn wir nun y-start für grid-row-start festlegen, wird die benannte Gitterlinie diesmal gewinnen.

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

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

A sngle-column layout with five rows containing white rectangles. The first item is in the second row and colored green.

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.