Vetia grid-column-end

Vetia grid-column-end përcakton pozicionin përfundimtar të elementit në grid ose rrjet deri në një kolonë të caktuar. Vlera e vetisë mund të jetë numër pozitiv ose negativ. Nëse përcaktojmë numër pozitiv, atëherë pozicioni përfundimtar i elementit numërohet nga e majta në të djathtë. Kur specifikohet numër negativ, elementi do të pozicionohet në rend të kundërt, d.m.th. nga e djathta në të majtë.

Një nuancë e rëndësishme e vetisë grid-column-end është se numri i kolonës së specifikuar nuk përfshihet në pozicionin përfundimtar të elementit - nëse vendosim numrin 3, atëherë elementi do të zërë vetëm kolonën e parë dhe të dytë.

Sintaksa

përzgjedhësi {
	grid-column-end: numër pozitiv ose negativ;
}

Shembull

Le t'u caktojmë elementëve në grid pozicionet përfundimtare:

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

Shembull

Tani me ndihmën e vetisë grid-column-start le të bëjmë që elementi i parë, i dytë dhe i tretë të pozicionohen në rreshtin e parë. Ndërsa elementi i katërt të zërë të gjithë rreshtin e dytë:

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

Shembull

Kur mbivendosen kolonat e zëna nga elementët fqinjë, çdo element pasues zhvendoset një rresht më poshtë. Le të përdorim këtë veçori për të bërë që elementi i parë të pozicionohet në rreshtin e parë, i dyti - në të dytin, ndërsa i treti dhe i katërti - në rreshtin e tretë:

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

Shembull

Tani le të përcaktojmë në vetinë grid-column-end numra negativë:

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

Shihni gjithashtu

vetia grid-column-start,
e cila përcakton pozicionin fillestar të elementit në grid sipas kolonave
vetia grid-column,
e cila përcakton pozicionet fillestare dhe përfundimtare të elementit në grid sipas kolonave
vetia grid-template-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në grid
vetia grid-auto-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në grid implicit