Мӯҳтавои ҳамворкунӣ дар меҳвари уфуқӣ дар CSS Grid

Дар grid на танҳо ҷойгир кардан, балки ҳамвор кардани мӯҳтаво дар тири меҳвари уфуқии grid низ лозим мешавад. Дар ин ҳолат, мо аз хусусияти justify-content истифода мебарем, ки дар унсури волидайн муайян карда мешавад. Биёед дар мисолҳо бинем, ки ин хусусият чӣ гуна кор мекунад.

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

Ҳамворкуниро барои унсурҳои мо дар оғози меҳвари уфуқӣ муқаррар мекунем:

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

#parent {
	display: grid;
	justify-content: start;
	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;
}

Дар маркази меҳвар

Ва акнун ҳамворкуниро барои унсурҳои мо дар маркази меҳвари уфуқӣ муқаррар мекунем:

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

#parent {
	display: grid;
	justify-content: 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;
}

Дар охири меҳвар

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

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

#parent {
	display: grid;
	justify-content: 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-ро дар се сутун ҷойгир кунед ва ҳамворкунии унсурҳоро дар маркази меҳвари уфуқии grid муқаррар кунед.

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