Usawazishaji wa Maudhui kwenye Mhimili Wima kwenye Gridi ya CSS

Kwa usawazishaji wa maudhui kwenye mhimili wima wa gridi tunatumia sifa align-content, ambayo hupewa kwenye kipengele-kizazi.

Mwanzo wa mhimili

Wacha tuweke usawazishaji kwa vipengele vyetu kwenye gridi mwanzoni mwa 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-content: 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;
}

Katikati ya mhimili

Sasa wacha tuweke usawazishaji wa vipengele katikati ya 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-content: 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;
}

Mwisho wa mhimili

Wacha tuweke usawazishaji wa vipengele mwishoni mwa 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-content: 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;
}

Kazi za Vitendo

Unda gridi, inayojumuisha vipengele sita, vilivyopangwa kwenye safu mbili. Fanya usawazishaji wa vipengele mwanzoni mwa mhimili wima wa gridi.

Sasa pangilia vipengele vya gridi kwenye safu mbili na uweke usawazishaji wa vipengele katikati ya mhimili wima wa gridi.

Badilisha kazi iliyopita, ili usawazishaji wa vipengele ufanyike mwishoni mwa mhimili wima.