Căn chỉnh phần tử riêng lẻ theo trục dọc của CSS Grid

Tương tự, bạn có thể căn chỉnh các phần tử theo trục dọc bằng cách sử dụng thuộc tính align-self. Hãy cùng xem các ví dụ để hiểu cách hoạt động của nó.

Theo điểm đầu của trục dọc

Hãy đặt căn chỉnh cho phần tử đầu tiên theo điểm đầu của trục dọc:

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

Theo trung tâm của trục dọc

Hãy đặt căn chỉnh cho phần tử đầu tiên theo trung tâm của trục dọc:

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

Theo điểm cuối của trục dọc

Hãy đặt căn chỉnh cho phần tử đầu tiên của chúng ta trong grid theo điểm cuối của trục dọc:

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

Bài tập thực hành

Tạo một grid, bao gồm năm phần tử, sắp xếp thành hai cột. Thực hiện căn chỉnh phần tử thứ ba theo điểm đầu của trục dọc của grid.

Bây giờ hãy sắp xếp các phần tử của grid thành ba cột và đặt căn chỉnh cho phần tử thứ hai theo trung tâm của trục dọc của grid.

Thay đổi bài tập trước đó, để việc căn chỉnh phần tử thứ tư và thứ năm diễn ra theo điểm cuối và điểm đầu của trục dọc tương ứng.