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

Thường xuyên trong grid, có thể cần thiết phải căn chỉnh nội dung đồng thời dọc theo trục ngang và trục dọc của grid. Cho mục đích này, chúng ta có thể sử dụng kết hợp hai thuộc tính đã được xem xét trong bài học trước: justify-content và align-content.

Theo đầu trục dọc và cuối trục ngang

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-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 cuối trục dọc và đầu trục ngang

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Theo giữa trục dọc và trục ngang

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

#parent {
	display: grid;
	justify-content: flex-end;
	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;
}

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

Tạo một grid, bao gồm sáu phần tử và sắp xếp chúng thành hai cột. Thực hiện căn chỉnh các phần tử theo đầu trục ngang và giữ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à thiết lập căn chỉnh các phần tử theo giữa trục ngang và cuối trục dọc của grid.

Thay đổi bài tập trước đó, để việc căn chỉnh các phần tử diễn ra theo cuối trục ngang và giữa trục dọc của grid.