CSS grid gözleriniň içindäkileri gorizontal oka boýunça deňleşdirmek

Grid gözleriniň içindäki elementleri, ýagny setirler we sütünler kesişende emele gelen meýdanlary, deňleşdirmek üçin ata elementde berilýän justify-items aýratynlygy ulanylýar. Deňleşdirmäni iň aýdyňlykda brauzeriň sazlama guralynda gridi synlap görüp bilersiňiz.

Okuň başy boýunça

Gözlerimiziň içindäki elementlerimizi gorizontal okuň başy boýunça deňleşdireliň:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Indi gridimizi sazlama guralynda görüp geçeliň:

Okuň merkezi boýunça

Gözlerimiziň içindäki elementlerimizi gorizontal okuň merkezi boýunça deňleşdireliň:

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

Indi gridimizi sazlama guralynda görüp geçeliň:

Okuň ahyry boýunça

Elementlerimizi gorizontal okuň ahyry boýunça deňleşdireliň:

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

Indi gridimizi sazlama guralynda görüp geçeliň:

Amaly wezipeler

Üç setirden ybarat, bäş elementden ybarat grid dörediň. Elementleri gorizontal oka boýunça deňleşdiriň.

Indi elementleri iki setirde ýerleşdiriň we gözlerdäki elementleri gorizontal okuň merkezi boýunça deňleşdiriň.

Öňki wezipäni elementleriň deňleşmegi gorizontal okuň ahyry boýunça bolýan ýaly üýtgediň.