Thuộc tính viết tắt căn chỉnh theo cả hai trục bên trong ô của CSS Grid

Với thuộc tính viết tắt place-items bạn có thể đồng thời căn chỉnh các phần tử bên trong các ô của grid theo cả hai trục. Thuộc tính nhận hai giá trị, được phân tách bằng dấu cách. Giá trị đầu tiên chúng ta đặt vị trí của phần tử theo trục dọc, và giá trị thứ hai - theo trục ngang. Thuộc tính được đặt trong phần tử cha.

Hãy cùng xem hoạt động của thuộc tính này qua các ví dụ.

Giữa theo chiều dọc và đầu theo chiều ngang

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

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

Hãy xem grid của chúng ta trong công cụ kiểm tra:

Cuối theo chiều dọc và giữa theo chiều ngang

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

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

Hãy xem grid của chúng ta trong công cụ kiểm tra:

Đầu theo chiều dọc và cuối theo chiều ngang

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

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

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 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à đặt căn chỉnh các phần tử theo giữa trục ngang và giữa trục dọc của grid.

Thay đổi bài tập trước đó sao cho việc căn chỉnh các phần tử xảy ra theo cuối trục ngang và đầu trục dọc của grid.