Хосияти grid-column

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

Агар ҳамчун қимат рақами мусбӣ муайян кунем, он гоҳ вазъияти унсур аз чап ба рост ҳисоб карда мешавад. Дар вақти ишора кардани рақами манфӣ унсур дар тартиби баръакс ҷойгир карда мешавад, яъне аз рост ба чап.

Синтаксис

интихобкунанда {
	grid-column: вазъияти ибтидоӣ / вазъияти ниҳоӣ;
}

Намуна

Биёед барои унсурҳо дар 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: 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 (гирд) нисбат ба сафҳо муайян мекунад
хосияти grid-column-start,
ки вазъияти ибтидоии унсурро дар grid (гирд) нисбат ба сутунҳо муайян мекунад
хосияти grid-column-end,
ки вазъияти ниҳоии унсурро дар grid (гирд) нисбат ба сутунҳо муайян мекунад
хосияти grid-template-columns,
ки миқдор ва паҳноии сутунҳоро дар grid (гирд) муайян мекунад
хосияти grid-auto-columns,
ки миқдор ва паҳноии сутунҳоро дар grid (гирд)-и нозоҳир муайян мекунад