CSS grid-indäki aýratyn elementleri düşlik oky boýunça deňleşdirmek

Şeýlelikde, elementleri düşlik oky boýunça align-self häsiýeti ýardamy bilen deňleşdirip bolýar. Geliň mysallar bilen göräliň, bunyň nädip işleýändigini.

Düşlik okynyň başy boýunça

Birnji element üçin düşlik okynyň başy boýunça deňleşdirmäni belgileýäliň:

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

Düşlik okynyň merkezi boýunça

Birnji element üçin düşlik okynyň merkezi boýunça deňleşdirmäni belgileýäliň:

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

Düşlik okynyň soňy boýunça

Grid-indäki birnji elementimiz üçin düşlik okynyň soňy boýunça deňleşdirmäni belgileýäliň:

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

Amaly wezipeler

Iki sütun üstünde ýerleşdirilen bäş elementden ybarat grid dörediň. Üçünji element üçin düşlik okynyň başy boýunça deňleşdirmäni ýerine ýetiriň.

Indi elementleri üç sütun üstünde ýerleşdiriň we ikinji element üçin düşlik okynyň merkezi boýunça deňleşdirmäni belleň.

Öňki wezipäni düzediň, dördünji we bäşinji elementleriň deňleşdirilmegi düşlik okynyň soňy we başy boýunça ýerine ýetirilsin.