Хусусияти кӯтоҳкунии ҷойгиршавӣ дар ҳуҷайраҳои CSS Grid

Бо ёрии хусусияти кӯтоҳшудаи place-items мумкин аст унсурҳоро дар дохили ҳуҷайраҳои Grid ҳамзамон дар ҳарду меҳвар ҷойгир кард. Хусусият ду қимат мегирад, ки бо фосила аз ҳам ҷудо шудаанд. Бо қимати аввал мо ҷойгиршавии унсурро дар меҳвари амудӣ, бо дуввумӣ - дар меҳвари уфуқӣ муайян мекунем. Хусусият дар унсури волидайн муайян карда мешавад.

Биёед кор кардани ин хусусиятро дар мисолҳо бубинем.

Маркази амудӣ ва ибтидои уфуқӣ

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Биёед ба Grid-и худ дар васоити ислоҳкунанда нигарем:

Охири амудӣ ва маркази уфуқӣ

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Биёед ба Grid-и худ дар васоити ислоҳкунанда нигарем:

Ибтидои амудӣ ва охири уфуқӣ

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Биёед ба Grid-и худ дар васоити ислоҳкунанда нигарем:

Вазифаҳои амалӣ

Grid-е созед, ки аз шаш унсур иборат бошад ва онҳоро дар ду сутун ҷойгир кунед. Ҷойгиршавии унсурҳоро бо ибтидои меҳвари уфуқӣ ва маркази меҳвари амудӣ анҷом диҳед.

Акнун унсурҳои Grid-ро дар се сутун ҷойгир кунед ва ҷойгиршавии унсурҳоро бо маркази меҳвари уфуқӣ ва маркази меҳвари амудӣ муайян кунед.

Вазифаи қаблиро тағйир диҳед, то ки ҷойгиршавии унсурҳо бо охири меҳвари уфуқӣ ва ибтидои меҳвари амудӣ сурат гирад.