Алоқамандкунии унсури ҷудогона бар тири амудии CSS grid

Ба ҳамин монанд метавон унсурҳоро бар тири амудӣ бо истифода аз хусусияти align-self алоқаманд кард. Биёед намунаҳоро бубинем, ки ин чӣ гуна кор мекунад.

Бар оғози тири амудӣ

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

<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;
	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 {
	align-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 {
	align-self: center;
}

Бар охири тири амудӣ

Биёед барои унсури аввали мо дар grid алоқамандкуниро бар охири тири амудӣ танзим кунем:

<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 {
	align-self: end;
}

Масъалаҳои амалӣ

Grid-е созед, ки аз панҷ унсур иборат бошад, ки бар ду сутун ҷойгир шудаанд. Алоқамандкунии унсури сеюмро бар оғози тири амудии grid иҷро кунед.

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

Масъалаи қаблӣро тағир диҳед, то алоқамандкунии унсурҳои чаҳорум ва панҷум мутаносибан бар охир ва оғози тири амудӣ рух диҳад.