Īpašība grid-column-start

Īpašība grid-column-start nosaka elementa sākuma pozīciju grid vai režģī kolonnās. Ī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 sākuma 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.

Sintakse

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

Piemērs

Piešķirsim elementiem grid sākuma pozīcijas:

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

Piemērs

Tagad īpašībā grid-column-start 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;
	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;
}

Piemērs

Tagad, izmantojot īpašību grid-column-end panāksim, ka pirmais, otrais un trešais elements atrodas pirmajā rindā. Bet ceturtais elements aizņem 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. Ņemot vērā šo iespēju, izveidosim tā, lai pirmais elements atrastos pirmajā rindā, otrais - otrajā, bet trešais un ceturtais - aizņemtu trešo 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: 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;
}

Skatiet arī

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