Căn chỉnh trên cả hai trục bên trong các ô của CSS Grid

Có thể đồng thời thiết lập căn chỉnh các phần tử bên trong các ô của grid theo cả trục ngang và trục dọc. Cho mục đích này, chúng ta có thể kết hợp hai thuộc tính justify-items và align-items, được thiết lập trên phần tử cha.

Căn giữa các trục

Hãy căn giữa các phần tử của chúng ta theo trục ngang và trục dọc:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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ây giờ hãy xem grid của chúng ta trong công cụ kiểm tra:

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

Hãy đặt các phần tử của chúng ta trong các ô theo đầu trục ngang và cuối trục dọc:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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ây giờ hãy xem grid của chúng ta trong công cụ kiểm tra:

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

Hãy đặt các phần tử của chúng ta trong các ô theo cuối trục ngang và đầu trục dọc:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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ây giờ hãy xem grid của chúng ta trong công cụ kiểm tra:

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

Tạo một grid, bao gồm năm phần tử, được sắp xếp trên ba hàng. Thực hiện căn chỉnh các phần tử trong các ô theo đầu trục ngang và giữa trục dọc.

Bây giờ hãy sắp xếp các phần tử grid thành hai hàng và thiết lập căn chỉnh các phần tử bên trong các ô theo giữa trục ngang và đầu trục dọc.

Thay đổi bài tập trước, để căn chỉnh các phần tử xảy ra theo cuối trục ngang và giữa trục dọc.