Penjajaran Elemen Individu pada Paksi Menusuk Grid CSS

Secara analogi, elemen boleh dijajarkan pada paksi menusuk menggunakan sifat align-self. Mari kita lihat contoh-contoh bagaimana ia berfungsi.

Pada permulaan paksi menusuk

Mari tetapkan penjajaran untuk elemen pertama pada permulaan paksi menusuk:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">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 {
	align-self: start;
}

Pada tengah paksi menusuk

Mari tetapkan penjajaran elemen pertama pada tengah paksi menusuk:

<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 {
	align-self: center;
}

Pada akhir paksi menusuk

Mari tetapkan penjajaran untuk elemen pertama dalam grid pada akhir paksi menusuk:

<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 {
	align-self: end;
}

Tugas-tugas praktikal

Cipta grid yang terdiri daripada lima elemen, disusun dalam dua lajur. Laksanakan penjajaran elemen ketiga pada permulaan paksi menusuk grid.

Sekarang susun elemen grid dalam tiga lajur dan tetapkan penjajaran elemen kedua pada tengah paksi menusuk grid.

Ubahsuai tugas sebelumnya, supaya penjajaran elemen keempat dan kelima berlaku pada akhir dan permulaan paksi menusuk masing-masing.