Eigenschaft grid-column-end

Die Eigenschaft grid-column-end legt die Endposition eines Elements im Grid oder Raster bis zu einer bestimmten Spalte fest. Der Wert der Eigenschaft kann eine positive oder negative Zahl sein. Wenn wir eine positive Zahl angeben, wird die Endposition 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.

Ein wichtiger Nuance der Eigenschaft grid-column-end besteht darin, dass die Nummer der angegebenen Spalte nicht in die Endposition des Elements einbezogen wird - wenn wir die Zahl 3 angeben, wird das Element nur die erste und zweite Spalte belegen.

Syntax

Selektor {
	grid-column-end: positive oder negative Zahl;
}

Beispiel

Lassen Sie uns den Elementen im Grid Endpositionen zuweisen:

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

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

Beispiel

Und jetzt lassen Sie uns mit der Eigenschaft grid-column-start dafür sorgen, dass das erste, zweite und dritte Element in der ersten Reihe positioniert werden. Und 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 belegten 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 anzuordnen:

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

Beispiel

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

Siehe auch

die Eigenschaft grid-column-start,
die die Startposition eines Elements im Grid nach Spalten festlegt
die Eigenschaft grid-column,
die die Start- und Endpositionen eines Elements im Grid nach 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