Penjajaran Elemen Individu pada Kedua-dua Paksi Grid CSS

Anda boleh menjajarkan elemen individu secara serentak pada kedua-dua paksi mendatar dan menegak dengan menggabungkan sifat justify-self dan align-self.

Pada permulaan mendatar dan tengah menegak

Mari kita tetapkan penjajaran untuk elemen pertama kita pada permulaan paksi mendatar dan menegak:

<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 mendatar dan permulaan menegak

Sekarang mari kita tetapkan penjajaran elemen pertama pada tengah mendatar dan permulaan menegak:

<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 mendatar dan tengah menegak

Mari kita tetapkan penjajaran pertama elemen pada akhir mendatar dan tengah menegak:

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

Buat grid yang terdiri daripada enam elemen dan letakkannya dalam dua baris. Lakukan penjajaran elemen kedua pada permulaan mendatar dan tengah menegak.

Sekarang letakkan elemen grid dalam tiga baris dan tetapkan penjajaran elemen ketiga pada tengah mendatar dan akhir menegak.

Ubah suai tugas sebelumnya, supaya penjajaran elemen keempat berlaku pada akhir mendatar dan tengah menegak.

Sekarang buat supaya penjajaran elemen kelima berlaku pada permulaan mendatar dan permulaan menegak, dan elemen keenam - pada akhir mendatar dan tengah menegak.