Свойство 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,
у ноаник гриддаги устунлар сони ва кенглигини белгилайди