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 ⁨Oktober 2017⁩.

Die grid-row CSS Kurzschreibweise legt die Größe und Position eines Rasters in einer Reihenachse fest, indem eine Linie, eine Spanne oder nichts (automatisch) zur Positionierung des Rasters beigetragen wird und dadurch die Start- und Endkante des Rasterbereichs spezifiziert.

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 werden, sind diese 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 als auto-Schlüsselwort
oder als ein <custom-ident>-Wert
oder als 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 angibt, dass die Eigenschaft nichts zur Positionierung des Rasterelements beiträgt, was eine automatische Platzierung, eine automatische Spanne oder eine Standardschwelle von 1 anzeigt.

<custom-ident>

Wenn eine benannte Linie mit dem Namen <custom-ident>-start/<custom-ident>-end existiert, trägt sie zur ersten solchen Linie zur Positionierung des Rasterelements bei.

Hinweis: Benannte Rasterbereiche erzeugen automatisch implizite benannte Linien in dieser Form, sodass die Angabe von grid-row: foo; die Start-/Endkante dieses benannten Rasterbereichs wählt (es sei denn, eine andere Linie mit dem Namen foo-start/foo-end wurde zuvor explizit angegeben).

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

<integer> && <custom-ident>?

Trägt zur n-ten Rasterlinie zur Positionierung des Rasterelements bei. Wenn eine negative ganze Zahl angegeben wird, zählt sie stattdessen rückwärts, beginnend vom Endrand des expliziten Rasters.

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 angenommen, dass alle impliziten Rasterlinien für diesen Zweck diesen Namen tragen.

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

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

Trägt zu einer Rasterszanne zur Positionierung des Rasterelements bei, sodass 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 tragen, um diese Spanne zu zählen.

Wenn der <integer> weggelassen wird, lautet der Standardwert 1. Negative ganze Zahlen 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

Festlegen der Größe und Position der Rasterreihe

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden