Egenskapen grid-column-end

Egenskapen grid-column-end setter sluttposisjonen for et element i et grid eller et nett opp til en bestemt kolonne. Verdien til egenskapen kan være et positivt eller negativt tall. Hvis vi setter et positivt tall, regnes sluttposisjonen for elementet fra venstre til høyre. Ved å angi et negativt tall vil elementet plasseres i omvendt rekkefølge, dvs. fra høyre til venstre.

En viktig nyanse ved egenskapen grid-column-end er at nummeret på den angitte kolonnen ikke inkluderes i sluttposisjonen for elementet - hvis vi setter tallet 3, vil elementet bare oppta første og andre kolonne.

Syntaks

velger {
	grid-column-end: positivt eller negativt tall;
}

Eksempel

La oss sette sluttposisjoner for elementene i gridet:

<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

La oss nå ved hjelp av egenskapen grid-column-start gjøre slik at det første, andre og tredje elementet plasseres på første rad. Og det fjerde elementet opptar hele andre rad:

<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 av kolonner som opptas av nærliggende elementer, vil hvert påfølgende element flyttes ned én rad. La oss ved hjelp av denne egenskapen gjøre slik at det første elementet plasseres på første rad, det andre - på andre, og det tredje og fjerde - på tredje rad:

<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

La oss nå i egenskapen grid-column-end sette negative tall:

<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å

egenskapen grid-column-start,
som setter startposisjonen for et element i gridet etter kolonner
egenskapen grid-column,
som setter start- og sluttposisjoner for et element i gridet etter kolonner
egenskapen grid-template-columns,
som setter antall og bredde på kolonner i gridet
egenskapen grid-auto-columns,
som setter antall og bredde på kolonner i et implisitt grid