CSS Grid içindeki ýaýkalar boýunça dikeý ok boýunça deňleşdiriş

Grid içindaki elementleri dikeý ok boýunça deňleşdirmek üçin biz ata elementde berilýän align-items aýratynlygyny ulanýarys. Bu aýratynlygyň işini brauzeriň debuggerinde gridi görende görüp bilersiňiz.

Oküň başy boýunça

Geliň, elementlerimizi ýaýkalar içinde dikeý oküň 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;
	align-items: flex-start;
	grid-template-columns: 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;
}

Gridimize brauzeriň debuggerinde göz aýlalyň:

Oküň merkezi boýunça

Indi bolsa elementlerimizi ýaýkalarda dikeý oküň 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;
	align-items: center;
	grid-template-columns: 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;
}

Gridimize brauzeriň debuggerinde göz aýlalyň:

Oküň soňy boýunça

Ýene bir gezek elementleriň deňleşdirilmegini üýtgedeliň, bu gezek dikeý oküň soňy boýunça:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 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;
}
#elem1 {
	
}

Gridimize brauzeriň debuggerinde göz aýlalyň:

Amaly tabşyryklar

Iki sütun boyunca ýerleşdirilen alty elementden ybarat grid dörediň. Elementleri ýaýkalar içinde dikeý oküň başy boýunça deňleşdiriň.

Indi grid elementlerini üç sütun boyunca ýerleşdiriň we elementleriň ýaýkalarda gridiň dikeý oküň merkezi boýunça deňleşdirilmegini beriň.

Öňki tabşyrygy şeýle üýtgediň, elementleriň deňleşdirilmegi dikeý oküň soňy boýunça bolsun.