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

Căn chỉnh theo trục ngang có thể được thiết lập không chỉ trên phần tử cha, mà còn cho từng phần tử con riêng biệt. Để làm điều này, người ta sử dụng thuộc tính justify-self.

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

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

<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;
}

Theo trung tâm của trục ngang

Hãy đặt căn chỉnh phần tử đầu tiên theo trung tâm của trục ngang:

<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;
}

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

Hãy đặt căn chỉnh cho phần tử đầu tiên theo điểm kết thúc của trục ngang:

<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;
}

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 thành hai hàng. Thực hiện căn chỉnh phần tử thứ hai theo điểm bắt đầu của trục ngang.

Bây giờ hãy sắp xếp các phần tử grid thành ba hàng và đặt căn chỉnh phần tử thứ ba theo trung tâm của trục ngang grid.

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