CSS grid-da gorizontal okyň üstündäki mazmuny deňlemek

Gridde diňe ýerleşdirmek däl, eýsem mazmuny gorizontal okyň boýunça deňlemek hem gerek bolup biler. Bu ýagdaýda biz atal elementde berilýän justify-content häsiýetini ulanyarys. Bu häsiýetiň nädip işleýändigine mysallar bilen seredeliň.

Oküň başy boýunça

Elementlerimizi gorizontal oküň başy boýunça deňläýliň:

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

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

Oküň merkezi boýunça

Indi bolsa elementlerimizi gorizontal oküň merkezi boýunça deňläýliň:

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

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

Oküň soňy boýunça

Elementlerimizi gorizontal oküň soňy boýunça deňläýliň:

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

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

Amaly wezipeler

Iki sütun üstünde ýerleşen alty elementden ybarat grid dörediň. Elementleri gridiň gorizontal okyň başy boýunça deňläň.

Indi elementleri üç sütun üstünde ýerleşdiriň we olary gridiň gorizontal oküň merkezi boýunça deňläň.

Öňki wezipäni elementleriň deňlenişi gridiň gorizontal oküň soňy boýunça bolýan ýaly üýtgediň.