Penjajaran Kandungan pada Paksi Mendatar dalam Grid CSS

Dalam grid, kita mungkin bukan sahaja perlu meletakkan, tetapi juga menjajarkan kandungan sepanjang paksi mendatar grid. Dalam kes ini, kita menggunakan sifat justify-content, yang ditetapkan pada elemen induk. Mari kita lihat contoh bagaimana sifat ini berfungsi.

Pada Permulaan Paksi

Mari tetapkan penjajaran untuk elemen kita pada permulaan paksi mendatar:

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

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

Pada Tengah Paksi

Sekarang mari tetapkan penjajaran untuk elemen kita pada tengah paksi mendatar:

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

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

Pada Akhir Paksi

Mari tetapkan penjajaran untuk elemen kita pada akhir paksi mendatar:

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

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

Tugas Praktikal

Buat grid yang terdiri daripada enam elemen, disusun dalam dua lajur. Lakukan penjajaran elemen pada permulaan paksi mendatar grid.

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

Ubah suai tugas sebelumnya supaya penjajaran elemen berlaku pada akhir paksi mendatar.