Як элементи алоҳидаро дар меҳвари уфуқии CSS Grid мувофиқ кардан

Мувофиқ кардан дар меҳвари уфуқӣ танҳо дар элементи волидайн муайян карда намешавад, балки барои ҳар як фарзанд ба таври алоҳида муайян кардан мумкин аст. Барои ин мақсад истифода мешавад хусусияти justify-self.

Бо оғози меҳвари уфуқӣ

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

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

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

Ба маркази меҳвари уфуқӣ

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

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

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

Ба охири меҳвари уфуқӣ

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

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

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

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

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

Акнун элементҳои grid-ро дар се қатор ҷойгир кунед ва мувофиқ кардани элементи сеюмро ба маркази меҳвари уфуқии grid муқаррар кунед.

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