Uitlyning van 'n Individuele Element op die Vertikale As van 'n CSS-rooster

Elemente kan op 'n soortgelyke wyse uitgelyn word op die vertikale as met behulp van die align-self eienskap. Kom ons kyk na voorbeelde van hoe dit werk.

By die begin van die vertikale as

Kom ons stel die uitlyning vir die eerste element by die begin van die vertikale as:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

In die middel van die vertikale as

Kom ons stel die uitlyning van die eerste element in die middel van die vertikale as:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

By die einde van die vertikale as

Kom ons stel die uitlyning vir ons eerste element in die rooster by die einde van die vertikale as:

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

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

Praktiese Take

Skep 'n rooster wat uit vyf elemente bestaan, gerangskik in twee kolomme. Voer die uitlyning van die derde element uit by die begin van die rooster se vertikale as.

Rangskik nou die roosterelemente in drie kolomme en gee die tweede element uitlyning in die middel van die rooster se vertikale as.

Verander die vorige taak, sodat die vierde en vyfde elemente onderskeidelik by die einde en die begin van die vertikale as uitgelyn word.