grid-row-end

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-end CSS Eigenschaft legt die Endposition eines Grid-Elements in der Grid-Reihe fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt. Dadurch wird die Endkante des Grid-Bereichs angegeben.

Probieren Sie es aus

Syntax

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

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

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

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

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

Werte

auto

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

<custom-ident>

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

Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizit benannte Linien dieser Form, sodass grid-row-end: foo; die Endkante dieses benannten Grid-Bereichs wählt (es sei denn, eine andere Linie mit dem Namen foo-end wurde zuvor ausdrücklich angegeben).

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

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

<integer> && <custom-ident>?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben wird, erfolgt die Zählung stattdessen rückwärts, beginnend von der Endkante des expliziten Grids.

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 Grid-Linien diesen Namen haben, um diese Position zu finden.

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

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

Trägt eine Grid-Span zur Platzierung des Grid-Elements bei, sodass die Endkante der Reihe des Grid-Bereichs des Grid-Elements n Linien von der Anfangskante 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 Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.

Wenn das <integer> weggelassen wird, gilt es standardmäßig 1. Negative ganze Zahlen oder 0 sind ungültig.

Formale Definition

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

Formale Syntax

Beispiele

Endposition für ein Grid-Element festlegen

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-row-end

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch