Belyning binne CSS-rooster selle oor die vertikale as

Om elemente binne roosterselle oor die vertikale as te belyn, gebruik ons die eienskap align-items, wat in die ouer-element gespesifiseer word. Die werking van hierdie eienskap kan gesien word wanneer die rooster in die blaaier se foutsoeker nagegaan word.

Volgens die begin van die as

Laat ons ons elemente binne selle volgens die begin van die vertikale as belyn:

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

Laat ons na ons rooster kyk in die blaaier se foutsoeker:

Volgens die middel van die as

En nou sal ons ons elemente in die selle volgens die middel van die vertikale as belyn:

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

Laat ons na ons rooster kyk in die blaaier se foutsoeker:

Volgens die einde van die as

Laat ons weer die belyning van elemente verander, hierdie keer volgens die einde van die vertikale as:

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

Laat ons na ons rooster kyk in die blaaier se foutsoeker:

Praktiese take

Skep 'n rooster wat uit ses elemente bestaan, gerangskik in twee kolomme. Voer belyning van elemente binne selle volgens die begin van die vertikale as uit.

Rangskik nou die rooster se elemente in drie kolomme en spesifiseer dat elemente in selle volgens die middel van die rooster se vertikale as gebelyn word.

Verander die vorige taak sodat belyning van elemente volgens die einde van die vertikale as plaasvind.