Ҳамвории ҳарду меҳварҳо дар дохили ҳуҷайраҳои CSS Grid

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

Маркази меҳварҳо

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

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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-ро ба ду сатр ҷойгир кунед ва ҳамвории элементҳо дар дохили ҳуҷайраҳо бо маркази меҳвари уфуқӣ ва оғози меҳвари амудӣ таъин кунед.

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