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 Rasterspalte an, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Rasterplatzierung beiträgt und dadurch die Block-Endkante seines Rasterbereichs spezifiziert.

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

Ist ein Schlüsselwort, das anzeigt, dass die Eigenschaft nichts zur Platzierung des Grid-Items beiträgt, was auf eine automatische Platzierung, eine automatische Spanne oder eine Standardspanne von 1 hindeutet.

<custom-ident>

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

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

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

<integer> && <custom-ident>?

Trägt die n-te Rasterlinie zur Platzierung des Grid-Items bei. Wenn eine negative Ganzzahl angegeben ist, wird stattdessen rückwärts gezählt, beginnend an der Endkante 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 existieren, wird davon ausgegangen, dass alle impliziten Rasterlinien diesen Namen für die Positionsfindung haben.

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

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

Trägt eine Rasterspanne zur Platzierung des Grid-Items bei, sodass die Spaltenendkante des Rasterbereichs des Grid-Items n Linien von der Startkante entfernt ist.

Wenn die <integer> weggelassen wird, lautet die Standardeinstellung 1. Negative Ganzzahlen oder 0 sind ungültig.

Das <custom-ident> kann nicht den span Wert 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 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;
}

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

Browser-Kompatibilität

BCD tables only load in the browser