Eigenschaft grid-column-start

Die Eigenschaft grid-column-start legt die Startposition eines Elements im Grid oder Raster entlang der Spalten fest. Der Wert der Eigenschaft kann eine positive oder negative Zahl sein. Wenn wir eine positive Zahl angeben, wird die Startposition 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-start: positive oder negative Zahl;
}

Beispiel

Lassen Sie uns den Elementen im Grid Startpositionen 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-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Beispiel

Und jetzt lassen Sie uns in der Eigenschaft grid-column-start 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-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Beispiel

Und jetzt machen wir mit Hilfe der Eigenschaft grid-column-end folgendes: Das erste, zweite und dritte Element sollen in der ersten Reihe liegen. Das vierte Element soll die gesamte zweite Reihe einnehmen:

<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-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Beispiel

Wenn sich die von benachbarten Elementen eingenommenen Spalten überlappen, wird jedes nachfolgende Element um eine Reihe nach unten verschoben. Lassen Sie uns unter Berücksichtigung dieser Möglichkeit das erste Element in der ersten Reihe platzieren, das zweite - in der zweiten, und das dritte und vierte - in der dritten Reihe:

<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-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Siehe auch

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