CSS гридда алоҳида элементни икки ўқ бўйлаб текислаш

Алоҳида элементни горизонтал ва вертикал ўқлар бўйлаб бир вақтнинг ўзида justify-self ва align-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;
	align-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: center;
	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 {
	justify-self: end;
	align-self: center;
}

Амалий машқлар

Олтита элементдан иборат грид яратиб, уларни икки қаторга жойланг. Иккинчи элементни горизонтал ўқнинг бошига ва вертикал ўқнинг марказига текисланг.

Энди грид элементларини уч қаторга жойлаштириб, учинчи элементни горизонтал ўқнинг марказига ва вертикал ўқнинг охирига текисланг.

Олдинги машқни ўзгартириб, тўртинчи элементни горизонтал ўқнинг охирига ва вертикал ўқнинг марказига текисланг.

Энди бешинчи элементни горизонтал ўқнинг бошига ва вертикал ўқнинг бошига, олтинчи элементни эса горизонтал ўқнинг охирига ва вертикал ўқнинг марказига текисланг.