Căn chỉnh trong ô lưới CSS dọc theo trục ngang

Để căn chỉnh các phần tử bên trong các ô lưới, tức là các vùng xuất hiện tại giao điểm của các cột và hàng, thuộc tính justify-items được sử dụng, nó được đặt trong phần tử cha. Căn chỉnh có thể được nhận thấy rõ ràng nhất khi xem lưới trong công cụ kiểm tra của trình duyệt.

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

Hãy căn chỉnh các phần tử của chúng ta bên trong các ô theo điểm bắt đầu của trục ngang:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Và bây giờ hãy nhìn vào lưới của chúng ta trong công cụ kiểm tra:

Theo trung tâm của trục

Hãy căn chỉnh các phần tử của chúng ta trong các ô theo trung tâm của trục ngang:

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

Và bây giờ hãy nhìn vào lưới của chúng ta trong công cụ kiểm tra:

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

Hãy căn chỉnh các phần tử của chúng ta theo điểm kết thúc của trục ngang:

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

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

Và bây giờ hãy nhìn vào lưới của chúng ta trong công cụ kiểm tra:

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

Tạo một lưới, bao gồm năm phần tử, được sắp xếp theo ba hàng. Thực hiện căn chỉnh các phần tử dọc theo trục ngang.

Bây giờ hãy sắp xếp các phần tử lưới theo hai hàng và đặt căn chỉnh các phần tử trong các ô theo trung tâm của trục ngang.

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