grid-column-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-column-end CSS Eigenschaft gibt die Endposition eines Grid-Items innerhalb der Grid-Spalte an, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu dessen Platzierung im Grid beiträgt und dadurch die Block-Endkante seines Grid-Bereichs festlegt.

Probieren Sie es aus

grid-column-end: auto;

grid-column-end: 3;

grid-column-end: -1;

grid-column-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: 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-column-end: auto;

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

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

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

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

Werte

auto

Trägt nichts zur Platzierung des Grid-Items bei, was eine Auto-Platzierung, eine automatische Spanne oder eine Standardsanne von 1 anzeigt. Dies ist der Standardwert.

<custom-ident>

Trägt die erste Linie zur Platzierung des Grid-Items bei, wenn eine benannte Linie mit dem Namen <custom-ident>-end existiert.

Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizite benannte Linien dieser Form, daher wird bei Angabe von grid-column-end: foo; die Endkante des benannten Grid-Bereichs gewählt (sofern nicht vorher eine andere Linie mit dem Namen foo-end explizit angegeben wurde).

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

<integer> && <custom-ident>?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Items bei. Wenn eine negative Ganzzahl angegeben wird, zählt sie stattdessen rückwärts, beginnend von der Endkante des expliziten Grids.

Wenn ein Name als <custom-ident> gegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genug 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-Spanne zur Platzierung des Grid-Items bei, sodass die Spaltenendkante des Grid-Items n Linien von der Anfangskante entfernt ist.

Wenn ein Name als <custom-ident> gegeben wird, werden nur Linien mit diesem Namen gezählt. Sind nicht genügend Linien mit diesem Namen vorhanden, wird angenommen, dass alle impliziten Gitterlinien auf der Seite des expliziten Gitters, die der Suchrichtung entspricht, diesen Namen zum Zwecke der Zählung dieser Spanne haben.

Wenn das <integer> weggelassen wird, ist der Standardwert 1. Negative Ganzzahlen oder 0 sind ungültig.

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

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-column-end = 
  <grid-line>  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

Beispiele

Spaltenende für ein Grid-Item setzen

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

* {
  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