RWD Grid View - CSS Responsive - Ook-code

Responsive Web Design - Grid-View

Grid-View là gì?

Rất nhiều trang web được thiết kế dựa trên chế độ xem dạng lưới grid-view, có nghĩa là trang wed được chia thành các cột có chiều rộng bằng nhau.

Sử dụng bố cục dạng grid-view rất hữu ích khi thiết kế các trang web. Nó giúp chúng ta đặ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ỏ hoặc mở rộng khi chúng ta thay đổi kích thước cửa sổ trình duyệt.

Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng lưới thu gọn.

Xây dựng chế độ xem lưới đáp ứng

Chúng ta bắt đầu xây dựng chế độ xem lưới đáp ứng nhé.

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 padding và đường viền border đã được tính trong tổng chiều rộng và chiều cao của các phần tử.

* { box-sizing: border-box; } Nếu bạn chưa hiểu rõ chức năng của thuộc tính box-sizing, xem lại bài viết CSS box-sizing.

Ví dụ sau cho thấy một trang web đáp ứng đơn giản, có hai cột

25% 75%

Ví dụ

.menu { width: 25%; float: left; padding: 15px; border: 1px solid red; } .main { width: 75%; float: left; padding: 15px; border: 1px solid red; }

Xem kết quả

Ví dụ trên là đơn giản với trang web chỉ chứa hai cột. Tuy nhiên, chúng ta muốn sử dụng chế độ xem lưới đáp ứng 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ột cột: 100%/ 12 cột = 8,33%.

Sau đó, chúng ta 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 tử sẽ kéo dài.

Code CSS như sau:

CSS

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}

Xem kết quả

Tất cả các cột này được float về bên trái và có phần đệm padding 15px.

CSS

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

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

HTML

<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 float sang 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 lên như thể các cột đó không tồn tại. Để ngăn chặn điều này, chúng ta sẽ thêm một kiểu xóa luồng.

CSS

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

Chúng ta cũng thêm một số kiểu và màu sắc để làm cho nó trông đẹp hơn.

Ví dụ

.menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

Xem kết quả

Lưu ý là trang web trong ví dụ này không đẹp lắm, khi chúng ta thay đổi kích thước cửa sổ trình duyệt thành chiều rộng nhỏ. Trong bài tiếp theo, chúng ta sẽ tìm hiểu cách khắc phục điều này.