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 bestimmt die Größe und Position eines Grid-Elements innerhalb einer Gitterreihe, indem es zur Platzierung im Raster eine Linie, eine Spanne oder nichts (automatisch) beiträgt und dadurch die Inline-Start- und Inline-Endkante seines Rasterbereichs festlegt.

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;
}

Bestandteileigenschaften

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 sind, werden sie durch einen / getrennt. Die Langform grid-row-start wird auf den Wert vor dem Schrägstrich gesetzt, und die Langform grid-row-end wird auf den Wert nach dem Schrägstrich gesetzt.

Jeder <grid-line> Wert kann angegeben werden als:

entweder das Schlüsselwort auto
oder ein <custom-ident> Wert
oder ein <integer> Wert
oder beide <custom-ident> und <integer>, getrennt durch ein Leerzeichen
oder das Schlüsselwort span zusammen mit entweder einem <custom-ident> oder einem <integer> oder beidem.

Werte

auto

Ist ein Schlüsselwort, das anzeigt, dass die Eigenschaft nichts zur Platzierung des Rasterelements beiträgt, was eine automatische Platzierung, eine automatische Spanne oder eine Standardsprache von 1 anzeigt.

<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 Rasterelements bei.

Hinweis: Benannte Rasterbereiche generieren automatisch implizit benannte Linien dieser Form, daher wird bei der Angabe von grid-row: foo; die Start-/Endkante dieses benannten Rasterbereichs gewählt (sofern nicht bereits vorher eine andere Linie mit dem Namen foo-start/foo-end explizit angegeben wurde).

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

<integer> && <custom-ident>?

Trägt die n-te Rasterlinie zur Platzierung des Rasterelements bei. Bei einer negativen Ganzzahl wird ab der Endkante des expliziten Rasters gezählt.

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

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

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

Trägt eine Rasterspanne zur Platzierung des Rasterelements bei, so dass die entsprechende Kante des Rasterbereichs des Elements n Linien von der gegenüberliegenden Kante entfernt ist.

Wenn ein Name als <custom-ident> angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Rasterlinien auf der Seite des expliziten Rasters, die der Suchrichtung entspricht, diesen Namen zum Zweck des Zählens dieser Spanne haben.

Wenn das <integer> weggelassen wird, ist es standardmäßig 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

Größe und Position von Rasterreihen festlegen

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