Penyelarasan Elemen Individual pada Sumbu Vertikal CSS Grid

Demikian pula, elemen dapat disejajarkan pada sumbu vertikal menggunakan properti align-self. Mari kita lihat contoh-contohnya, bagaimana cara kerjanya.

Di awal sumbu vertikal

Mari atur penyelarasan untuk elemen pertama di awal sumbu vertikal:

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

Di tengah sumbu vertikal

Mari atur penyelarasan elemen pertama di tengah sumbu vertikal:

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

Di akhir sumbu vertikal

Mari atur penyelarasan untuk elemen pertama kita di grid di akhir sumbu vertikal:

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

Tugas Praktis

Buatlah grid yang terdiri dari lima elemen, disusun dalam dua kolom. Lakukan penyelarasan elemen ketiga di awal sumbu vertikal grid.

Sekarang susun elemen grid dalam tiga kolom dan atur penyelarasan elemen kedua di tengah sumbu vertikal grid.

Ubah tugas sebelumnya, sehingga penyelarasan elemen keempat dan kelima terjadi di akhir dan awal sumbu vertikal secara berturut-turut.