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

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

grid-column-end касиетинин маанилүү нюансы ушунда: көрсөтүлгөн тилкенин номери элементтин аяктоочу ордуна кирбейт - эгер биз 3 санын белгилесек, анда элемент биринчи жана экинчи тилкелерди гана ээлейт.

Синтаксис

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

Мисал

Келгиле, гриддеги элементтерге аяктоочу ордун белгилейли:

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

Мисал

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

<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 касиетинде терс сандарды көрсөтөлү:

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

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

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