Usawazishaji ndani ya seli za Gridi ya CSS kwenye mhimili wima

Kwa usawazishaji wa vipengele ndani ya seli za gridi kwenye mhimili wima tunatumia sifa align-items, ambayo huteuliwa kwenye kipengele-kizazi. Kazi ya sifa hii inaweza kuonekana wakati wa kutazama gridi kwenye kipochakazi kirakibashiti.

Kwenye mwanzo wa mhimili

Wacha tusawazishe vipengele vyetu ndani ya seli kwenye mwanzo wa mhimili wima:

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

Tuangalie gridi yetu kwenye kipochakazi kirakibashiti:

Kwenye kituo cha mhimili

Sasa wacha tusawazishe vipengele vyetu katika seli kwenye kituo cha mhimili wima:

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

Tuangalie gridi yetu kwenye kipochakazi kirakibashiti:

Kwenye mwisho wa mhimili

Badilisha tena usawazishaji wa vipengele, wakati huu kwenye mwisho wa mhimili wima:

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

Tuangalie gridi yetu kwenye kipochakazi kirakibashiti:

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele sita, iliyopangwa kwenye safu wima mbili. Fanya usawazishaji wa vipengele ndani ya seli kwenye mwanzo wa mhimili wima.

Sasa pangilia vipengele vya gridi kwenye safu wima tatu na weka usawazishaji wa vipengele katika seli kwenye kituo cha mhimili wima wa gridi.

Badilisha kazi iliyotanguliya ili usawazishaji wa vipengele ufanyike kwenye mwisho wa mhimili wima.