Свойство 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;
}

Мисол

Энди esa 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;
}

Мисол

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