Perataan Konten di Sepanjang Kedua Sumbu pada CSS Grid

Seringkali dalam grid, kita mungkin perlu meratakan konten secara bersamaan di sepanjang sumbu horizontal dan vertikal grid. Untuk tujuan ini, kita dapat menggunakan bersama dua properti yang telah Anda pelajari di pelajaran sebelumnya: justify-content dan align-content.

Awal Vertikal dan Akhir Horizontal

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

Akhir Vertikal dan Awal Horizontal

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

Tengah Sumbu Vertikal dan Horizontal

<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 Praktis

Buatlah grid yang terdiri dari enam elemen dan tempatkan dalam dua kolom. Lakukan perataan elemen pada awal sumbu horizontal dan tengah sumbu vertikal grid.

Sekarang tempatkan elemen grid dalam tiga kolom dan atur perataan elemen pada tengah sumbu horizontal dan akhir sumbu vertikal grid.

Ubah tugas sebelumnya, sehingga perataan elemen terjadi pada akhir sumbu horizontal dan tengah sumbu vertikal grid.