grid-row-start

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-start-CSS-Eigenschaft spezifiziert die Startposition eines Grid-Elements innerhalb der Rasterreihe, indem sie zu seiner Rasterplatzierung eine Linie, eine Spanne oder nichts (automatisch) beiträgt und somit die Inline-Startkante seines Grid-Bereichs angibt.

Probieren Sie es aus

Syntax

css
/* Keyword value */
grid-row-start: auto;

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

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

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

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

Diese Eigenschaft wird als einzelner <grid-line>-Wert angegeben. Ein <grid-line>-Wert kann folgendermaßen spezifiziert 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 beidem.

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' gibt, trägt sie zur Platzierung des Grid-Elements die erste solche Linie bei.

Hinweis: Benannte Grid-Bereiche generieren automatisch implizit benannte Linien dieser Form, sodass die Angabe von grid-row-start: foo; die Startkante dieses benannten Grid-Bereichs wählt (es sei denn, es wurde vorher explizit eine andere Linie namens foo-start angegeben).

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

<integer> && <custom-ident>?

Trägt die n-te Rasterlinie zur Platzierung des Grid-Elements bei. Wenn eine negative Ganzzahl angegeben wird, zählt sie stattdessen rückwärts, beginnend am Endrand des expliziten Rasters.

Wenn ein Name als <custom-ident> angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen vorhanden sind, wird davon ausgegangen, dass alle impliziten Rasterlinien diesen Namen haben, um diese Position zu bestimmen.

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

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

Trägt eine Rasterspannweite zur Platzierung des Grid-Elements bei; so dass die Zeilenstartkante des Grid-Bereichs des Grid-Elements n Linien vom Endrand 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 vorhanden sind, wird davon ausgegangen, dass alle impliziten Rasterlinien auf der Seite des expliziten Rasters, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.

Wenn die <integer> weggelassen wird, ist sie standardmäßig 1. Negative Ganzzahlen oder 0 sind ungültig.

Das <custom-ident> kann nicht den Wert span annehmen.

Formal definition

Initialer Wertauto
Anwendbar aufGridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formal syntax

Beispiele

Einstellung des Startpunkts einer Zeile für ein Grid-Element

HTML

html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# line-placement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch