Căn chỉnh nội dung theo trục ngang trong CSS Grid

Trong grid, có thể cần không chỉ sắp xếp, mà còn căn chỉnh nội dung dọc theo trục ngang của grid. Trong trường hợp này, chúng ta sử dụng thuộc tính justify-content, được thiết lập trên phần tử cha. Hãy xem các ví dụ về cách thuộc tính này hoạt động.

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

Thiết lập căn chỉnh cho các phần tử của chúng ta 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-content: start;
	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;
}

Theo trung tâm của trục

Và bây giờ thiết lập căn chỉnh cho các phần tử của chúng ta 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-content: 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;
}

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

Hãy thiết lập căn chỉnh cho 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-content: 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;
}

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

Tạo một grid, bao gồm sáu phần tử, được sắp xếp thành hai cột. Thực hiện căn chỉnh các phần tử theo điểm bắt đầu của trục ngang grid.

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

Thay đổi bài tập trước đó sao cho việc căn chỉnh các phần tử diễn ra theo điểm kết thúc của trục ngang.