Diegrid-columnCSSKurzform-Eigenschaft gibt die Größe und Position eines Grid-Elements innerhalb einerGrid-Spalte an, indem sie eine Linie, einen Bereich oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und dadurch den Inline-Start- und Inline-Endrand seinesGrid-Bereichs bestimmt.

Probieren Sie es aus

grid-column: 1;

grid-column: 1 / 3;

grid-column: 2 / -1;

grid-column: 1 / span 2;

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

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• grid-column-end
• grid-column-start

Syntax

/* Keyword values */grid-column: auto;grid-column: auto / auto;/* <custom-ident> values */grid-column: some-grid-area;grid-column: some-grid-area / some-other-grid-area;/* <integer> + <custom-ident> values */grid-column: some-grid-area 4;grid-column: 4 some-grid-area / 6;/* span + <integer> + <custom-ident> values */grid-column: span 3;grid-column: span some-grid-area;grid-column: 5 some-grid-area span;grid-column: span 3 / 6;grid-column: span some-grid-area / span some-other-grid-area;grid-column: 5 some-grid-area span / 2 span;/* Global values */grid-column: inherit;grid-column: initial;grid-column: revert;grid-column: revert-layer;grid-column: unset;

Diese Eigenschaft wird als ein oder zwei<grid-line>-Werte angegeben.

Wenn zwei<grid-line>-Werte angegeben werden, werden sie durch/ getrennt. Die Langformgrid-column-start wird auf den Wert vor dem Schrägstrich gesetzt, und die Langformgrid-column-end wird auf den Wert nach dem Schrägstrich gesetzt.

Jeder<grid-line>-Wert kann wie folgt angegeben werden:

• entweder dasauto-Schlüsselwort
• oder ein<custom-ident>-Wert
• oder ein<integer>-Wert
• oder sowohl<custom-ident> als auch<integer>, getrennt durch ein Leerzeichen
• oder das Schlüsselwortspan zusammen mit entweder einem<custom-ident> oder einem<integer> oder beidem.

Werte

auto

Ist ein Schlüsselwort, das angibt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt, was eine automatische Platzierung, eine automatische Spannweite oder eine Standardspannweite von1 bedeutet.

<custom-ident>

Wenn es eine benannte Linie mit dem Namen<custom-ident>-start/<custom-ident>-end gibt, trägt sie die erste derartige Linie zur Platzierung des Grid-Elements bei.

Hinweis:Benannte Grid-Bereiche generieren automatisch implizite benannte Linien dieser Form, sodass die Angabe vongrid-column: foo; die Start-/End-Kante dieses benannten Grid-Bereichs auswählt (es sei denn, eine andere Linie mit dem Namenfoo-start/foo-end wurde vorher explizit angegeben).

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

<integer> && <custom-ident>?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative Ganzzahl angegeben ist, wird sie stattdessen rückwärts 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. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Grid-Linien diesen Namen zum Zweck der Bestimmung dieser Position haben.

Ein<integer>-Wert von0 ist ungültig.

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

Trägt eine Grid-Spannweite zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des Grid-Elements n Linien von der gegenüberliegenden Kante entfernt ist.

Wenn ein Name als<custom-ident> angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen zum Zweck der Zählung dieser Spannweite haben.

Wenn das<integer> weggelassen wird, ist es standardmäßig1. Negative Ganzzahlen oder0 sind ungültig.

Formale Definition

Formale Syntax

grid-column =
<grid-line>[ /<grid-line>]?

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

<integer> =
<number-token>

Beispiele

Grid-Spaltengröße und -position festlegen

HTML

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#grid {  display: grid;  height: 100px;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: 100px;}#item1 {  background-color: lime;}#item2 {  background-color: yellow;  grid-column: 2 / 4;}#item3 {  background-color: blue;  grid-column: span 2 / 7;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-row
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

• Linienbasierte Platzierung mit CSS Grid

• Video:Linienbasierte Platzierung