Eienskap grid-column-end

Die eienskap grid-column-end spesifiseer die eindposisie van 'n element in 'n rooster by 'n sekere kolom. Die waarde van die eienskap kan 'n positiewe of negatiewe getal wees. As ons 'n positiewe getal gee, word die eindposisie van die element van links na regs getel. As 'n negatiewe getal gespesifiseer word, sal die element in omgekeerde volgorde geplaas word, d.w.s. van regs na links.

'n Belangrike nuansie van die eienskap grid-column-end is dat die nommer van die gespesifiseerde kolom nie by die eind- posisie van die element ingesluit word nie - as ons die getal 3 gee, sal die element slegs die eerste en tweede kolomme beslaan.

Sintaksis

selektor {
	grid-column-end: positiewe of negatiewe getal;
}

Voorbeeld

Kom ons gee vir elemente in die rooster hulle eindposisies:

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

Voorbeeld

En nou, met behulp van die eienskap grid-column-start maak ons so dat die eerste, tweede en derde elemente in die eerste ry geplaas word. En die vierde element die hele tweede ry beslaan:

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

Voorbeeld

Wanneer kolomme wat deur naburige elemente beslaan word, oorvleuel, skuif elke daaropvolgende element 'n ry laer. Kom ons gebruik hierdie eienskap om te maak dat die eerste element in die eerste ry geplaas word, die tweede - in die tweede, en die derde en vierde - in die derde ry:

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

Voorbeeld

En nou, laat ons in die eienskap grid-column-end negatiewe getalle spesifiseer:

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

Sien ook

die eienskap grid-column-start,
wat die beginposisie van 'n element in 'n rooster volgens kolomme spesifiseer
die eienskap grid-column,
wat die begin- en eindposisies van 'n element in 'n rooster volgens kolomme spesifiseer
die eienskap grid-template-columns,
wat die aantal en breedte van kolomme in 'n rooster spesifiseer
die eienskap grid-auto-columns,
wat die aantal en breedte van kolomme in 'n implisiete rooster spesifiseer