Perataan Dalam Sel Grid CSS pada Sumbu Vertikal

Untuk meratakan elemen dalam sel grid pada sumbu vertikal kita menggunakan properti align-items, yang ditetapkan pada elemen induk. Cara kerja properti ini dapat dilihat saat memeriksa grid di browser's debug tool.

Di Awal Sumbu

Mari kita ratakan elemen kita di dalam sel di awal sumbu vertikal:

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

Mari kita lihat grid kita di browser's debug tool:

Di Tengah Sumbu

Sekarang mari kita ratakan elemen kita di dalam sel di tengah sumbu vertikal:

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

Mari kita lihat grid kita di browser's debug tool:

Di Akhir Sumbu

Sekali lagi ubah perataan elemen, kali ini di akhir sumbu vertikal:

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

Mari kita lihat grid kita di browser's debug tool:

Tugas Praktis

Buatlah grid yang terdiri dari enam elemen, disusun dalam dua kolom. Lakukan perataan elemen di dalam sel di awal sumbu vertikal.

Sekatur susun elemen grid dalam tiga kolom dan atur perataan elemen di dalam sel di tengah sumbu vertikal grid.

Ubah tugas sebelumnya sehingga perataan elemen terjadi di akhir sumbu vertikal.