Хусусияти grid-column-end

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

Нюанси муҳими хусусияти grid-column-end он аст, ки рақами сутуни муайянкардашуда ба мавқеи ниҳоии унсур дохил намешавад - агар мо рақами 3-ро муқаррар кунем, унсур фақат сутунҳои аввал ва дуюмро ишғол мекунад.

Синтаксис

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

Намуна

Биёед барои унсурҳо дар грид мавқеъҳои ниҳоӣ муқаррар кунем:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Намуна

Ва акнун бо ёрии хусусияти grid-column-start чунон кунем, то унсурҳои аввал, дуюм ва сеюм дар сафи аввал ҷойгир шаванд. Ва унсури чорум тамоми сафи дуюмро ишғол кунад:

<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 рақамҳои манфиро муқаррар кунем:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	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: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Ҳамчунин бубинед

хусусияти grid-column-start,
ки мавқеи ибтидоии унсурро дар грид бо сутунҳо муқаррар мекунад
хусусияти grid-column,
ки мавқеи ибтидоӣ ва ниҳоии унсурро дар грид бо сутунҳо муқаррар мекунад
хусусияти grid-template-columns,
ки миқдор ва паҳноии сутунҳоро дар грид муқаррар мекунад
хусусияти grid-auto-columns,
ки миқдор ва паҳноии сутунҳоро дар гриди нозуҳур муқаррар мекунад