Eigenschaft grid-column

Die Eigenschaft grid-column legt die Start- und Endposition eines Elements im Grid oder Raster entlang der Spalten fest. Als Werte der Eigenschaft können positive oder negative Zahlen angegeben werden, getrennt durch einen Schrägstrich. Die erste Zahl gibt die Startposition des Elements an, die zweite - die Endposition.

Wenn eine positive Zahl als Wert angegeben wird, wird die Position des Elements von links nach rechts gezählt. Bei Angabe einer negativen Zahl wird das Element in umgekehrter Reihenfolge positioniert, d.h. von rechts nach links.

Syntax

Selektor {
	grid-column: Startposition / Endposition;
}

Beispiel

Lassen Sie uns den Elementen im Grid Start- und Endpositionen zuweisen:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Beispiel

Lassen Sie uns nun in der Eigenschaft grid-column negative Zahlen angeben:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -4;
}

Beispiel

Lassen Sie uns nun dafür sorgen, dass die ersten, zweiten und dritten Elemente in der ersten Reihe positioniert werden. Und das vierte Element die gesamte zweite Reihe einnimmt:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Beispiel

Wenn sich die von benachbarten Elementen eingenommenen Spalten überlappen, wird jedes nachfolgende Element um eine Reihe nach unten verschoben. Lassen Sie uns diese Besonderheit nutzen, um das erste Element in der ersten Reihe, das zweite - in der zweiten und das dritte und vierte - in der dritten Reihe zu positionieren:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Beispiel

Kombinieren wir die Eigenschaften grid-column und grid-row:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Beispiel

Lassen Sie uns nun dafür sorgen, dass der erste und fünfte Block die gesamte Reihe einnehmen, der zweite Block - zwei Reihen und zwei Spalten, und der dritte und vierte Block - eine Reihe und zwei Spalten:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Siehe auch

Eigenschaft grid-row,
die die Start- und Endposition eines Elements im Grid entlang der Reihen festlegt
Eigenschaft grid-column-start,
die die Startposition eines Elements im Grid entlang der Spalten festlegt
Eigenschaft grid-column-end,
die die Endposition eines Elements im Grid entlang der Spalten festlegt
Eigenschaft grid-template-columns,
die die Anzahl und Breite der Spalten im Grid festlegt
Eigenschaft grid-auto-columns,
die die Anzahl und Breite der Spalten im impliziten Grid festlegt