Căn chỉnh phần tử riêng lẻ theo cả hai trục của CSS Grid

Bạn có thể căn chỉnh một phần tử riêng lẻ đồng thời theo cả trục ngang và trục dọc bằng cách kết hợp các thuộc tính justify-self và align-self.

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

Hãy đặt căn chỉnh cho phần tử đầu tiên của chúng ta theo đầu của trục ngang và giữa của trục dọc:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

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

Bây giờ hãy đặt căn chỉnh cho phần tử đầu tiên theo giữa trục ngang và đầu trục dọc:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

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

Hãy đặt căn chỉnh cho phần tử đầu tiên theo cuối trục ngang và giữa trục dọc:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

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 hàng. Thực hiện căn chỉnh phần tử thứ hai 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ử của grid thành ba hàng và đặt căn chỉnh cho phần tử thứ ba theo giữa trục ngang và cuối trục dọc.

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

Bây giờ hãy làm sao cho căn chỉnh phần tử thứ năm theo đầu trục ngang và đầu trục dọc, còn phần tử thứ sáu - theo cuối trục ngang và giữa trục dọc.