CSS Grid Layout và cách sử dụng

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

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;

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;

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.