grid-row

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Die grid-row CSS-Kurzschreibweise legt die Größe und Position eines Grid-Elements innerhalb einer Grid-Reihe fest, indem sie zur Gitterplatzierung eine Linie, eine Spanne oder nichts (automatisch) beiträgt und damit die inline-start und inline-end Kante seines Gitterbereichs angibt.

Probieren Sie es aus

grid-row: 1;

grid-row: 1 / 3;

grid-row: 2 / -1;

grid-row: 1 / span 2;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Zuordnungs-Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css

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

/* <custom-ident> values */
grid-row: some-grid-area;
grid-row: some-grid-area / some-other-grid-area;

/* <integer> + <custom-ident> values */
grid-row: some-grid-area 4;
grid-row: 4 some-grid-area / 6;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span some-grid-area;
grid-row: 5 some-grid-area span;
grid-row: span 3 / 6;
grid-row: span some-grid-area / span some-other-grid-area;
grid-row: 5 some-grid-area span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

Diese Eigenschaft wird als ein oder zwei <grid-line> Werte angegeben.

Wenn zwei <grid-line> Werte angegeben werden, sind sie durch / getrennt. Die Langform grid-row-start wird auf den Wert vor dem Schrägstrich gesetzt und die Langform grid-row-end auf den Wert nach dem Schrägstrich.

Jeder <grid-line> Wert kann wie folgt angegeben werden:

entweder das Schlüsselwort auto
oder ein <custom-ident> Wert
oder ein <integer> Wert
oder sowohl <custom-ident> als auch <integer>, getrennt durch ein Leerzeichen
oder das Schlüsselwort span zusammen mit entweder einem <custom-ident> oder einem <integer> oder beiden.

Werte

auto

Ist ein Schlüsselwort, das anzeigt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt, was auf eine automatische Platzierung, eine automatische Spanne oder eine Standardspanne von 1 hinweist.

<custom-ident>

Wenn es eine benannte Linie mit dem Namen <custom-ident>-start/<custom-ident>-end gibt, trägt sie die erste solche Linie zur Platzierung des Grid-Elements bei.

Hinweis: Benannte Gitterbereiche generieren automatisch implizite benannte Linien dieser Form, sodass grid-row: foo; die start/end Kante dieses benannten Gitterbereichs auswählt (es sei denn, es wurde vorher explizit eine andere Linie mit dem Namen foo-start/foo-end angegeben).

Andernfalls wird dies behandelt, als wäre die Ganzzahl 1 zusammen mit dem <custom-ident> angegeben worden.

<integer> && <custom-ident>?

Trägt zur Platzierung des Grid-Elements die n-te Gitterlinie bei. Wenn eine negative Ganzzahl angegeben ist, wird stattdessen rückwärts gezählt, beginnend von der Endkante des expliziten Gitters.

Wenn ein Name als <custom-ident> angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird davon ausgegangen, dass alle impliziten Gitterlinien diesen Namen zum Zweck der Bestimmung dieser Position haben.

Ein <integer> Wert von 0 ist ungültig.

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

Trägt eine Gittersenne zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des Grid-Elements n Linien von der gegenüberliegenden Kante entfernt ist.

Wenn ein Name als <custom-ident> angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird bei der Zählung dieser Spanne davon ausgegangen, dass alle impliziten Gitterlinien auf der dem Suchradius entsprechenden Seite des expliziten Gitters diesen Namen haben.

Wenn die <integer> weggelassen wird, beträgt der Standardwert 1. Negative Ganzzahlen oder 0 sind ungültig.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `grid-row-start`: `auto` `grid-row-end`: `auto`
Anwendbar auf	Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `grid-row-start`: wie angegeben `grid-row-end`: wie angegeben
Animationstyp	diskret

Formale Syntax

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

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

Beispiele

Einstellen der Größe und Position der Grid-Reihe

HTML

html

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2 # placement-shorthands