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 spezifiziert die Endposition eines Grid-Items innerhalb der Grid-Reihe, indem sie eine Linie, einen Bereich oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und somit die inline-end Kante seines Grid-Bereichs festlegt.

Probieren Sie es aus

grid-row-end: auto;
grid-row-end: 3;
grid-row-end: -1;
grid-row-end: span 3;
<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;
}

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

Ist ein Schlüsselwort, das anzeigt, dass die Eigenschaft nichts zur Platzierung des Grid-Items beiträgt, was eine automatische Platzierung, einen automatischen Bereich oder einen Standardbereich von 1 anzeigt.

<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-Items 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 vorher ausdrücklich spezifiziert).

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

Das <custom-ident> kann nicht die Werte span und auto annehmen.

<integer> && <custom-ident>?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Items bei. Wenn eine negative ganze Zahl angegeben ist, wird stattdessen in umgekehrter Reihenfolge gezählt, beginnend von der Endkante des expliziten Grids.

Wenn ein Name als <custom-ident> angegeben ist, werden nur Linien mit diesem Namen gezählt. Existieren nicht genug Linien mit diesem Namen, wird angenommen, dass alle impliziten Grid-Linien diesen Namen für den Zweck dieser Positionsbestimmung haben.

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

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

Trägt einen Grid-Bereich zur Platzierung des Grid-Items bei, sodass die Endkante der Zeile des Grid-Items n Linien von der Startkante entfernt ist.

Wenn ein Name als <custom-ident> angegeben ist, werden nur Linien mit diesem Namen gezählt. Existieren nicht genug Linien mit diesem Namen, wird angenommen, dass alle impliziten Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entsprechen, diesen Namen für den Zweck des Zählens dieses Bereichs haben.

Wenn das <integer> weggelassen wird, ist der Standardwert 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

Festlegung des Endes der Zeile für ein Grid-Item

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

Siehe auch