1. Grid-View là gì ?

Nhiều trang web dựa trên chế độ xem lưới, có nghĩa là trang được chia thành các cột như sau:

Sử dụng chế độ xem lưới rất hữu ích khi thiết kế các trang web. Nó giúp bạn đặt các phần tử trên trang dễ dàng hơn

Chế độ xem lưới đáp ứng thường có 12 cột và có tổng chiều rộng là 100% và sẽ thu nhỏ và mở rộng khi bạn thay đổi kích thước cửa sổ trình duyệt

Ví dụ:

2. Xây dựng Grid-View trong Responsive Web Design

Trước tiên, hãy đảm bảo rằng tất cả các phần tử HTML có thuộc tính box-sizing được đặt thành border-box. Điều này đảm bảo rằng phần đệm và đường viền được bao gồm trong tổng chiều rộng và chiều cao của các phần tử

Thêm mã sau vào CSS của bạn:

* {
  box-sizing: border-box;
}

Ví dụ:

Ví dụ trên chỉ tốt nếu trang web chỉ chứa hai cột

Tuy nhiên, chúng tôi muốn sử dụng chế độ xem lưới với 12 cột, để có nhiều quyền kiểm soát hơn đối với trang web

Đầu tiên chúng ta phải tính tỷ lệ phần trăm cho mỗi cột: 100% / 12 cột = 8,33%

Sau đó, chúng tôi tạo một lớp cho mỗi cột trong số 12 cột, class = “col-” và một số xác định có bao nhiêu cột mà phần sẽ kéo dài

Ví dụ:

Tất cả các cột này phải nổi ở bên trái và có phần đệm 15px

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Mỗi hàng phải được bao bọc trong một <div>. Số cột bên trong một hàng phải luôn thêm tối đa 12

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Các cột bên trong một hàng đều nổi ở bên trái và do đó được đưa ra khỏi luồng của trang và các phần tử khác sẽ được đặt như thể các cột đó không tồn tại. Để ngăn chặn điều này, chúng tôi sẽ thêm một kiểu xóa luồng

.row::after {
  content: "";
  clear: both;
  display: table;
}

Hãy thêm màu vào trang web để nó trở nên đẹp và thu hút hơn

Ví dụ: