Grid-column-start касиети

grid-column-start касиети элементтин грид же тордо колонкалар боюнча баштапкы ордун белгилейт. Касиеттин мааниси оң же терс сан болушу мүмкүн. Эгер оң сан белгилесек, элементтин баштапкы орду солдон оңго карай эсептелет. Терс сан көрсөтүлгөндө элемент тескери тартипте жайгашат, башкача айтканда оңдон солго карай.

Синтаксис

селектор {
	grid-column-start: оң же терс сан;
}

Мисал

Келгиле, гриддеги элементтерге баштапкы ордун белгилейли:

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

Мисал

Эми grid-column-start касиетинде терс сандарды көрсөтөлү:

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

Мисал

Эми grid-column-end касиетинин жардамы менен биринчи, экинчи жана үчүнчү элементтер биринчи катарда жайгашсын. Төртүнчү элемент бүтүн экинчи катарды ээлесин:

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

Мисал

Көршү элементтер ээлеген колонкалардын үстүнөн жабышканда, ар бир кийинки элемент төмөнкү катарга ылайыкталат. Келгиле, бул мүмкүнчүлүктү эске алып, биринчи элемент биринчи катарда, экинчи - экинчи катарда, ал эми үчүнчү жана төртүнчү - үчүнчү катарды ээлесин:

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

Ошондой эле караңыз

grid-column-end касиети,
ал гриддеги элементтин колонкалар боюнча аяктоочу ордун белгилейт
grid-column касиети,
ал гриддеги элементтин колонкалар боюнча баштапкы жана аяктоочу ордун белгилейт
grid-template-columns касиети,
ал гриддеги колонкалардын санын жана туурасын белгилейт
grid-auto-columns касиети,
ал жашыруун гриддеги колонкалардын санын жана туурасын белгилейт