Ҷойгиркунии элементҳо дар ҳуҷайраҳои CSS Grid дар тири уфуқӣ

Барои ҷойгир кардани элементҳо дар дохили ҳуҷайраҳои grid, яъне минтақаҳое, ки дар натиҷаи буриши сутунҳо ва сатрҳо пайдо мешаванд, хосияти justify-items истифода мешавад, ки дар унсури волидайн муайян карда мешавад. Ҷойгиркуниро бештар ба назар мегирад вақте ки grid дар воситаи таҳлилгари браузер намоиш дода мешавад.

Ба оғози меҳвар

Биёед элементҳои худро дар дохили ҳуҷайраҳо ба оғози меҳвари уфуқӣ ҷойгир кунем:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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>5</div>
</div>

#parent {
	display: grid;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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-ро дар ду сатр ҷойгир кунед ва ҷойгиркунии элементҳоро дар ҳуҷайраҳо ба маркази меҳвари уфуқӣ муқаррар кунед.

Масъалаи қаблиро дигар кунед, то ки ҷойгиркунии элементҳо ба интиҳои меҳвари уфуқӣ сурат гирад.