Perataan Konten sepanjang Sumbu Horizontal di CSS Grid

Dalam grid, mungkin diperlukan tidak hanya untuk menempatkan, tetapi juga untuk meratakan konten sepanjang sumbu horizontal grid. Dalam hal ini, kita menggunakan properti justify-content, yang ditetapkan pada elemen induk. Mari kita lihat contoh-contoh bagaimana properti ini bekerja.

Awal Sumbu

Mari atur perataan untuk elemen-elemen kita ke 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-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;
}

Tengah Sumbu

Dan sekarang atur perataan untuk elemen-elemen kita ke 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-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;
}

Akhir Sumbu

Mari atur perataan untuk elemen-elemen kita ke 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-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 Praktis

Buatlah grid yang terdiri dari enam elemen, ditempatkan dalam dua kolom. Lakukan perataan elemen ke awal sumbu horizontal grid.

Sekarang tempatkan elemen grid dalam tiga kolom dan atur perataan elemen ke tengah sumbu horizontal grid.

Ubah tugas sebelumnya sehingga perataan elemen terjadi di akhir sumbu horizontal.