Perataan dalam Sel Grid CSS pada Sumbu Horizontal

Untuk perataan elemen dalam sel grid, yaitu area yang muncul di persimpangan kolom dan baris, digunakan properti justify-items, yang ditetapkan pada elemen induk. Perataan dapat paling jelas terlihat saat melihat grid di debug browser.

Pada Awal Sumbu

Mari kita ratakan elemen kita dalam sel pada awal sumbu horizontal:

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

Dan sekarang mari kita lihat grid kita di debug:

Pada Tengah Sumbu

Mari kita ratakan elemen kita dalam sel pada tengah sumbu horizontal:

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

Dan sekarang mari kita lihat grid kita di debug:

Pada Akhir Sumbu

Mari kita ratakan elemen kita pada akhir sumbu horizontal:

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

Dan sekarang mari kita lihat grid kita di debug:

Tugas Praktis

Buatlah grid yang terdiri dari lima elemen, ditempatkan dalam tiga baris. Lakukan perataan elemen pada sumbu horizontal.

Sekarang tempatkan elemen grid pada dua baris dan atur perataan elemen dalam sel pada tengah sumbu horizontal.

Ubah tugas sebelumnya, sehingga perataan elemen terjadi pada akhir sumbu horizontal.