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:

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

css#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:

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

css#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:

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

css#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