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 bestimmt die Endposition eines Grid-Elements innerhalb der Grid-Zeile, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Platzierung im Grid beiträgt und somit den inline-end Rand 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;


  
    One
    Two
    Three

.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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid rebeccapurple;
}

Syntax

css

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

/*  values */
grid-row-end: some-grid-area;

/*  +  values */
grid-row-end: 2;
grid-row-end: some-grid-area 4;

/* span +  +  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 anzeigt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt. Dies kann eine automatische Platzierung, eine automatische Spanne oder eine Standardspranne von 1 bedeuten.

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

Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizite benannte Linien dieser Form. Das Festlegen von grid-row-end: foo; wählt somit den Endrand dieses benannten Grid-Bereichs (sofern nicht zuvor explizit eine andere Linie namens foo-end angegeben wurde).

Andernfalls wird dies so behandelt, als ob die Ganzzahl 1 zusammen mit dem angegeben worden wäre.

Der darf die Werte span und auto nicht annehmen.

&& ?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative Ganzzahl angegeben wird, wird rückwärts gezählt, beginnend am Endrand des expliziten Grids.

Wird ein Name als angegeben, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen vorhanden sind, wird angenommen, dass alle impliziten Grid-Linien diesen Namen tragen, um diese Position zu finden.

Ein -Wert von 0 ist ungültig.

span && [ || ]

Trägt eine Grid-Spanne zur Platzierung des Grid-Elements bei, sodass der Reihenendrand des Grid-Bereichs des Elements n Linien vom Start-Rand entfernt ist.

Wenn die weggelassen wird, ist der Standardwert 1. Negative Ganzzahlen oder 0 sind ungültig.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

grid-row-end = 
    

 = 
  auto                                                |
                                        |
  [ [  |  ] && ? ]  |
  [ span && [  ||  ] ]

Beispiele

Festlegen des Reihenendes für ein Grid-Element

HTML

html


  One
  Two
  Three
  Four
  Five

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

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2 # line-placement