grid-column касиети

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

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

Синтаксис

селектор {
	grid-column: башталыш орду / аяктоочу орду;
}

Мисал

Гриддеги элементтерге башталыш жана аяктоочу ордун берели:

<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: 1 / 2;
}
#elem2 {
	grid-column: 1 / 3;
}
#elem3 {
	grid-column: 1 / 4;
}

Мисал

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

<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: 1 / -2;
}
#elem2 {
	grid-column: 1 / -3;
}
#elem3 {
	grid-column: 1 / -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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Мисал

grid-column жана grid-row касиеттерин айкалыштыралы:

<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;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 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 id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

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

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