Penjajaran Elemen Individu pada Paksi Mendatar Grid CSS

Penjajaran pada paksi mendatar boleh ditetapkan bukan sahaja dalam elemen induk, tetapi juga untuk setiap elemen anak secara berasingan. Untuk tujuan ini, digunakan sifat justify-self.

Pada permulaan paksi mendatar

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

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

Pada pusat paksi mendatar

Mari kita tetapkan penjajaran elemen pertama pada pusat paksi mendatar:

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

Pada akhir paksi mendatar

Mari kita tetapkan penjajaran untuk elemen pertama pada akhir paksi mendatar:

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

Tugas praktikal

Cipta grid, yang terdiri daripada lima elemen, disusun dalam dua baris. Laksanakan penjajaran elemen kedua pada permulaan paksi mendatar.

Sekarang susun elemen grid dalam tiga baris dan tetapkan penjajaran elemen ketiga pada pusat paksi mendatar grid.

Ubah suai tugas sebelumnya, supaya penjajaran elemen kelima berlaku pada akhir paksi mendatar.