Īpašība grid-column-end

Īpašība grid-column-end nosaka elementa beigu pozīciju gridā vai režģī līdz noteiktai kolonnai. Īpašības vērtība var būt pozitīvs vai negatīvs skaitlis. Ja mēs norādām pozitīvu skaitli, tad elementa beigu pozīcija tiek skaitīta no kreisās puses uz labo. Norādot negatīvu skaitli, elements tiks novietots apgrieztā secībā, t.i., no labās puses uz kreiso.

Svarīga īpašības grid-column-end nianse ir tāda, ka norādītās kolonnas numurs netiek iekļauts elementa beigu pozīcijā - ja mēs norādām skaitli 3, tad elements aizņems tikai pirmo un otro kolonnu.

Sintakse

selektors {
	grid-column-end: pozitīvs vai negatīvs skaitlis;
}

Piemērs

Piešķirsim elementiem gridā beigu pozīcijas:

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

Piemērs

Un tagad, izmantojot īpašību grid-column-start, panāksim, lai pirmais, otrais un trešais elements atrastos pirmajā rindā. Un ceturtais elements aizņemtu visu otro rindu:

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

Piemērs

Kad blakus esošo elementu aizņemtās kolonnas pārklājas, katrs nākamais elements tiek pārvietots uz rindu zemāk. Izmantosim šo īpatnību, lai pirmais elements atrastos pirmajā rindā, otrais - otrajā, bet trešais un ceturtais - trešajā rindā:

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

Piemērs

Un tagad īpašībā grid-column-end norādīsim negatīvus skaitļus:

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

Skatiet arī

īpašība grid-column-start,
kas nosaka elementa sākuma pozīciju gridā pa kolonnām
īpašība grid-column,
kas nosaka elementa sākuma un beigu pozīcijas gridā pa kolonnām
īpašība grid-template-columns,
kas nosaka kolonnu skaitu un platumu gridā
īpašība grid-auto-columns,
kas nosaka kolonnu skaitu un platumu netiešajā gridā