Хосияти grid-column-start

Хосияти grid-column-start ҷойгиршавии ибтидоии элементро дар grid (гирд) ё шабака аз рӯи сутунҳо муайян мекунад. Қимати хосият метавонад рақами мусбӣ ё манфӣ бошад. Агар рақами мусбиро муайян кунем, ҳолати ибтидоии элемент аз чап ба рост ҳисоб карда мешавад. Дар сурати муайян кардани рақами манфӣ элемент ба тартиби баръакс ҷойгир карда мешавад, яъне аз рост ба чап.

Синтаксис

интихобкунанда {
	grid-column-start: рақами мусбӣ ё манфӣ;
}

Намуна

Биёед барои элементҳо дар grid ҳолатҳои ибтидоиро муайян кунем:

<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 аз рӯи сутунҳо муайян мекунад
хосияти grid-column,
ки ҷойгиршавии ибтидоӣ ва хотимавии элементро дар grid аз рӯи сутунҳо муайян мекунад
хосияти grid-template-columns,
ки миқдор ва паҳноии сутунҳоро дар grid муайян мекунад
хосияти grid-auto-columns,
ки миқдор ва паҳноии сутунҳоро дар grid-и нозер муайян мекунад