Perataan Elemen Individual pada Kedua Sumbu CSS Grid

Anda dapat meratakan elemen individual secara bersamaan pada sumbu horizontal dan vertikal dengan mengkombinasikan properti justify-self dan align-self.

Pada Awal Sumbu Horizontal dan Tengah Sumbu Vertikal

Mari kita atur perataan untuk elemen pertama kita pada awal sumbu horizontal dan tengah sumbu vertikal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

Pada Tengah Sumbu Horizontal dan Awal Sumbu Vertikal

Sekarang mari kita atur perataan elemen pertama pada tengah sumbu horizontal dan awal sumbu vertikal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

Pada Akhir Sumbu Horizontal dan Tengah Sumbu Vertikal

Mari kita atur perataan pertama elemen pada akhir sumbu horizontal dan tengah sumbu vertikal:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

Tugas Praktis

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

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

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

Sekarang buatlah agar perataan elemen kelima terjadi pada awal sumbu horizontal dan awal sumbu vertikal, dan elemen keenam - pada akhir sumbu horizontal dan tengah sumbu vertikal.