Penjajaran Dalam Sel Grid CSS Pada Paksi Mengufuk

Untuk menjajarkan elemen dalam sel grid, iaitu kawasan yang terhasil daripada persilangan lajur dan baris, sifat justify-items digunakan, yang ditetapkan pada elemen induk. Penjajaran dapat dilihat dengan paling jelas apabila melihat grid dalam penyahpepijat pelayar.

Pada Permulaan Paksi

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

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Sekarang mari kita lihat grid kita dalam penyahpepijat:

Pada Tengah Paksi

Mari kita jajarkan elemen kita dalam sel pada tengah paksi mengufuk:

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

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

Sekarang mari kita lihat grid kita dalam penyahpepijat:

Pada Akhir Paksi

Mari kita jajarkan elemen kita pada akhir paksi mengufuk:

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

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

Sekarang mari kita lihat grid kita dalam penyahpepijat:

Tugas Praktikal

Cipta grid yang terdiri daripada lima elemen, disusun dalam tiga baris. Laksanakan penjajaran elemen pada paksi mengufuk.

Sekarang susun elemen grid pada dua baris dan tetapkan penjajaran elemen dalam sel pada tengah paksi mengufuk.

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