CSS grid-de ýeke-täk elementleri her iki ok boýunça deňleşdirmek

Ýeke-täk elementi birwagtda hem gorizontal, hem-de wertikal oklar boýunça justify-self we align-self häsiýetlerini birleşdirip deňleşdirip bolýar.

Gorizontal oküň başy we wertikal oküň merkezi boýunça

Indi birinji elementi üçin gorizontal oküň başy we wertikal oküň merkezi boýunça deňleşdirmäni belleýäris:

<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;
}

Gorizontal oküň merkezi we wertikal oküň başy boýunça

Indi bolsa birinji element üçin gorizontal oküň merkezi we wertikal oküň başy boýunça deňleşdirmäni belleýäris:

<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;
}

Gorizontal oküň ahyry we wertikal oküň merkezi boýunça

Birinji elementi gorizontal oküň ahyry we wertikal oküň merkezi boýunça deňleşdirýäris:

<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;
}

Amaly meseleler

Alty elementden ybarat grid dörediň we olary iki hatar boýunça ýerleşdiriň. Ikinji elementi gorizontal oküň başy we wertikal oküň merkezi boýunça deňleşdiriň.

Indi grid elementlerini üç hatar boýunça ýerleşdiriň we üçünji elementi gorizontal oküň merkezi we wertikal oküň ahyry boýunça deňleşdirmäni beriň.

Öňki meseläni düzedip, dördünji elementiň deňleşdirilşini gorizontal oküň ahyry we wertikal oküň merkezi boýunça ediň.

Indi bolsa, bäşinji elementi gorizontal oküň başy we wertikal oküň başy boýunça, altynjy elementi bolsa gorizontal oküň ahyry we wertikal oküň merkezi boýunça deňleşdiriň.