Căn chỉnh nội dung theo trục dọc trong CSS Grid

Để căn chỉnh nội dung dọc theo trục dọc của grid, chúng ta sử dụng thuộc tính align-content, được đặt trong phần tử cha.

Theo điểm bắt đầu của trục

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

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

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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;
}

Theo trung tâm của trục

Bây giờ hãy đặt căn chỉnh phần tử theo trung tâm của trục dọc:

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

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

Theo điểm kết thúc của trục

Hãy đặt căn chỉnh phần tử theo điểm kết thúc của trục dọc:

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

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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;
}

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

Tạo một grid bao gồm sáu phần tử, sắp xếp thành hai hàng. Thực hiện căn chỉnh các phần tử theo điểm bắt đầ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 hai hàng và đặt căn chỉnh các phần tử theo trung tâm của trục dọc của grid.

Thay đổi bài tập trước, để căn chỉnh phần tử xảy ra theo điểm kết thúc của trục dọc.