CSS grid gözleri içinde iki ok boýunça deňleşdirme

Grid gözleri içindäki elementleri şol bir wagtyň özünde gorizontal we dik oklar boýunça deňleşdirip bolýar. Bu maksat üçin biz ata elementde berilýän justify-items we align-items aýratynlyklaryny birleşdirip bilýäris.

Oklaryň merkezi boýunça

Geliň, elementlerimizi gorizontal we dik oklaryň merkezine deňleşdireliň:

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

Indi gridimizi düzediji gurjunda göreliň:

Gorizontalyň başy we dikligiň ahyry boýunça

Geliň, elementlerimizi gözler içinde gorizontal ok boýunça başynda we dik ok boýunça ahyrynda ýerleşdireliň:

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

Indi gridimizi düzediji gurjunda göreliň:

Gorizontalyň ahyry we dikligiň başy boýunça

Geliň, elementlerimizi gözler içinde gorizontal ok boýunça ahyrynda we dik ok boýunça başynda ýerleşdireliň:

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

Indi gridimizi düzediji gurjunda göreliň:

Amaly meseleler

Üç hatardan duran bäş elementden ybarat grid dörediň. Gözler içindäki elementleri gorizontal ok boýunça başynda we dik ok boýunça merkezinde deňleşdiriň.

Indi elementleri iki hatar boýunça ýerleşdiriň we gözler içindäki elementleriň deňleşdirilmegini gorizontal ok boýunça merkezinde we dik ok boýunça başynda belläň.

Öňki meseläni üýtgediň, elementleriň deňleşdirilmegi gorizontal ok boýunça ahyrynda we dik ok boýunça merkezinde bolsun.