Egenskaben grid-column-end

Egenskaben grid-column-end angiver slutpositionen for et element i et grid eller et net op til en bestemt kolonne. Egenskabens værdi kan være et positivt eller negativt tal. Hvis vi angiver et positivt tal, tælles slutpositionen for elementet fra venstre mod højre. Ved angivelse af et negativt tal vil elementet placeres i omvendt rækkefølge, dvs. fra højre mod venstre.

En vigtig nuance ved egenskaben grid-column-end er, at nummeret på den angivne kolonne ikke inkluderes i slutpositionen for elementet - hvis vi angiver tallet 3, vil elementet kun optage den første og anden kolonne.

Syntaks

selektor {
	grid-column-end: positivt eller negativt tal;
}

Eksempel

Lad os angive slutpositioner for elementer i griddet:

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

Eksempel

Og nu ved hjælp af egenskaben grid-column-start lad os sørge for, at det første, andet og tredje element placeres i den første række. Og det fjerde element indtager hele den anden række:

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

Eksempel

Ved overlapping af kolonner, som er optaget af tilstødende elementer, flyttes hvert efterfølgende element en række ned. Lad os ved hjælp af denne egenskab gøre så det første element placeres i den første række, det andet - i den anden, og det tredje og fjerde - i den tredje række:

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

Eksempel

Og lad os nu i egenskaben grid-column-end angive negative tal:

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

Se også

egenskaben grid-column-start,
som angiver startpositionen for et element i griddet efter kolonner
egenskaben grid-column,
som angiver start- og slutpositioner for et element i griddet efter kolonner
egenskaben grid-template-columns,
som angiver antal og bredde af kolonner i griddet
egenskaben grid-auto-columns,
som angiver antal og bredde af kolonner i det implicitte grid