Chia cột trong CSS có nhiều cách khác nhau. Bạn có thể sử dụng CSS, Flexbox, Bootstrap vv… Nhưng với những người thiết kế website chuyên nghiệp bạn sẽ phải áp dụng vào những trường hợp khác nhau. Hôm nay mình sẽ hướng dẫn bạn cách dùng CSS Grid để chia bố cục dạng lưới.

Bắt đầu bài tập nhé!

Hướng dẫn về CSS Grid Layout

Đầu tiên bạn cần một đoạn mã HTML

<div class="parent">
   <div class="item"> item-1 </div>
   <div class="item"> item-2 </div>
   <div class="item"> item-3 </div>
   <div class="item"> item-4 </div>
   <div class="item"> item-5 </div>
 </div>

Tiếp theo thêm mã CSS

.parent {
  display: grid;
  grid-template-columns: 250px 250px 250px 250px 250px;
  grid-template-rows: 150px;
}
.item {
    border: 1px solid green;
}

css-grid-layout

Với đoạn mã CSS phía trên bạn một cột có chiều rộng là 250px – Sử dụng grid-template-columns . Và chiều cao là 150px – Sử dụng grid-template-rows.

Tạo khoảng cách giữa các item

grid-gap: 30px;

Hoặc

grid-column-gap: 15px; 
grid-row-gap: 10px;

Viết gọn hơn

grid-gap: 15px 10px;

css-grid-layout-1

Nếu muốn hiển thị 3 item trên một hàng bạn chỉ cần thay xóa bớt đi 2 giá trị trong grid-template-columns

grid-template-columns: 250px 250px 250px;

css-grid-layout-2

Resonsive Grid

Khi xây dựng bố cục bạn cần thiết kế cho co giãn với mọi thiết bị. Bao gồm cả máy tính, desktop hay mobile.

Lúc này bạn sẽ dùng tới fraction unit (fr).

grid-template-columns: 1fr 2fr;

Điều này có nghĩa là class parent được chia thành 3 fractions trong đó cột 1 chiến 1fr và cột 2 chiếm 2fr.

Đang cập nhật thêm…

Bài viết này đã hướng dẫn cho bạn biết cách dùng CSS Grid chia bố cục layout của một trang web nhanh nhất. Nhờ nó bạn sẽ làm cho website đẹp mắt và chuyên nghiệp hơn rất nhiều.

Category:

2 Bình luận “CSS Grid Layout và cách sử dụng”

    1. Cảm ơn bạn đã quan tâm tới blog của mình, cũng chúc blog của bạn ngày càng phát triển hơn nhé!

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *