grid-column-end

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: 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

/* 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 Gitterelements bei und gibt eine automatische Platzierung, eine automatische Spannweite oder eine Standardspannweite von 1 an. Dies ist der Standardwert.

<custom-ident>

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

Hinweis: Benannte Gitterbereiche generieren automatisch implizite benannte Linien dieser Form, sodass grid-column-end: foo; die Endkante dieses benannten Gitterbereichs auswählt (es sei denn, eine andere Linie namens foo-end wurde vorher explizit angegeben).

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

<integer> && <custom-ident>?

Trägt die n-te Gitterlinie zur Platzierung des Gitterelements bei. Wenn eine negative Ganzzahl angegeben wird, zählt sie stattdessen rückwärts, ausgehend von der Endkante des expliziten Gitters.

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

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

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

Trägt eine Gitterspanne zur Platzierung des Gitterelements bei, sodass die Endkante der Gitterspalte 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 davon ausgegangen, dass alle impliziten Gitterlinien auf der Seite des expliziten Gitters, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.

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

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

Formale Definition

Formale Syntax

grid-column-end = 
  <grid-line>  

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

Beispiele

Festlegung des Spaltenendes für ein Gitterelement

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

.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

Browser-Kompatibilität

Siehe auch

• grid-column-start
• grid-column
• grid-row-start
• grid-row-end
• grid-row
• Linienbasierte Platzierung mit CSS-Grid
• Video: Linienbasierte Platzierung