Penjajaran Kandungan pada Kedua-dua Paksi dalam Grid CSS

Sering kali dalam grid, anda mungkin perlu menjajarkan kandungan serentak sepanjang paksi mendatar dan menegak grid. Untuk tujuan ini, kita boleh menggunakan bersama dua sifat yang telah anda pelajari dalam pelajaran sebelumnya: justify-content dan align-content.

Pada Permulaan Menegak dan Akhir Mendatar

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Pada Akhir Menegak dan Permulaan Mendatar

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Pada Pusat Paksi Menegak dan Mendatar

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Tugas Amali

Buat grid yang terdiri daripada enam elemen dan letakkannya dalam dua lajur. Lakukan penjajaran elemen pada permulaan mendatar dan pusat paksi menegak grid.

Sekarang letakkan elemen grid dalam tiga lajur dan tetapkan penjajaran elemen pada pusat mendatar dan akhir paksi menegak grid.

Ubah suai tugas sebelumnya, supaya penjajaran elemen berlaku pada akhir mendatar dan pusat paksi menegak grid.