Trong bài trước, bạn đã tìm hiểu cách tạo bố cục Grid theo các hàng và cột. Trong bài này, bạn sẽ tìm hiểu thêm về điều chỉnh vị trí của Grid Items khi đặt trong các ô trong Grid. Có 4 thuộc tính dùng để điều chỉnh vị trí của Grid Items trong Grid:

  • justify-items
  • align-items
  • justify-content
  • align-content

Mỗi thuộc tính trên sẽ có 4 giá trị chính: start, end, center và stretch. Ta vẫn sẽ dùng dự án nho nhỏ từ bài trước cho bài này.

Thuộc tính CSS điều chỉnh vị trí Grid Items

justify-items

justify-items được dùng để điều chỉnh vị trí của các Grid Items dọc theo trục ngang (Main Axis).

Dùng thử justify-items như ví dụ trong hình trên, bạn thêm một thẻ <div> .item-4 vào file HTML:

<div class="container">

  <!-- Các item 1, 2, 3 từ trước ở đây -->

  <div class="item-4"> D </div>
</div>

Điều chỉnh CSS:

.container {
  display: grid;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  gap: 40px;

  justify-items: end;
}

align-items

Tương tự justily-items, align-items sẽ điều chỉnh vị trí của các Grid Items dọc theo trục đứng (Cross Axis).

Dùng thử align-items như ví dụ trong hình trên, bạn thêm điều chỉnh file CSS:

.container {
  display: grid;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  gap: 40px;

  align-items: center;
}

justify-content

Không giống như hai thuộc tính vừa kể trên, justify-content và align-content ở bên dưới sẽ điều chỉnh vị trí của toàn bộ Grid (cả Grid Container và Grid Items). Hai thuộc tính này sẽ có thêm 3 giá trị khác: space-between, space-around và space-evenly. justify-content sẽ điều chỉnh vị trí của Grid dọc theo trục ngang (Main Axis).

Dùng thử justify-content, điều chỉnh file CSS như sau:

.container {
  display: grid;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  gap: 40px;

  justify-content: end;
}

align-content

align-item sẽ điều chỉnh vị trí của Grid dọc theo trục đứng (Cross Axis).

Dùng thử align-content như ví dụ trong hình trên, bạn thêm điều chỉnh file CSS:

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  gap: 40px;

  align-content: center;
}

Lưu ý: nếu bạn đã xác định độ cao của mỗi hàng với grid-template-rows, giá trị stretch của thuộc tính align-content sẽ không kéo giãn phần tử lớn hơn giá trị được xác định trong grid-template-rows. Điều này cũng tương tự với grid-template-columns và justify-content.

Tạm kết

Wow, bạn đã biết được hầu hết các thuộc tính sử dụng với Grid Container rồi. Bây giờ bạn đã có thể bắt tay vào làm việc với CSS Grid rồi. Trong hai bài tiếp theo, bạn sẽ tìm hiểu các thuộc tính dùng cho Grid Items.