Vetia grid-column-start

Vetia grid-column-start përcakton pozitën filluese të një elementi në grid ose rrjetë përgjatë kolonave. Vlera e vetisë mund të jetë një numër pozitiv ose negativ. Nëse përcaktojmë një numër pozitiv, pozita filluese e elementit numërohet nga e majta në të djathtë. Kur specifikohet një numër negativ, elementi do të pozicionohet në rend të kundërt, d.m.th. nga e djathta në të majtë.

Sintaksa

përzgjedhës {
	grid-column-start: numër pozitiv ose negativ;
}

Shembull

Le t'u caktojmë elementeve në grid pozita fillestare:

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

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Shembull

Tani le të përcaktojmë në vetinë grid-column-start numra negative:

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

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Shembull

Tani me ndihmën e vetisë grid-column-end 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 kolonat e zëna nga elementet fqinje mbivendosen, çdo element pasues zhvendoset në një rresht më poshtë. Le ta bëjmë, duke marrë parasysh këtë mundësi, që elementi i parë të pozicionohet në rreshtin e parë, i dyti - në të dytin, ndërsa i treti dhe i katërt - të zë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;
}

Shihni gjithashtu

vetia grid-column-end,
e cila përcakton pozitën përfundimtare të elementit në grid përgjatë kolonave
vetia grid-column,
e cila përcakton pozitat fillestare dhe përfundimtare të elementit në grid përgjatë 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