Penjajaran Dalam Sel Grid CSS Pada Paksi Menegak

Untuk menjajarkan elemen dalam sel grid pada paksi menegak, kita menggunakan sifat align-items, yang ditetapkan dalam elemen induk. Tindakan sifat ini boleh dilihat apabila memeriksa grid dalam alat penyahpepijat pelayar.

Pada Permulaan Paksi

Mari kita jajarkan elemen kita dalam sel pada permulaan paksi menegak:

<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 dalam alat penyahpepijat pelayar:

Pada Tengah Paksi

Sekarang mari kita jajarkan elemen kita dalam sel pada tengah paksi menegak:

<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 dalam alat penyahpepijat pelayar:

Pada Akhir Paksi

Mari ubah penjajaran elemen sekali lagi, kali ini pada akhir paksi menegak:

<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 dalam alat penyahpepijat pelayar:

Tugas Praktikal

Cipta grid yang terdiri daripada enam elemen, disusun dalam dua lajur. Laksanakan penjajaran elemen dalam sel pada permulaan paksi menegak.

Sekarang susun elemen grid dalam tiga lajur dan tetapkan penjajaran elemen dalam sel pada tengah paksi menegak grid.

Ubahsuai tugas sebelumnya supaya penjajaran elemen berlaku pada akhir paksi menegak.