Grid View là gì?

Khi các ứng dụng web ngày càng trở nên phức tạp, chúng ta cần có cách xây dựng giao diện một cách đơn giản, hiệu quả hơn và Grid View ra đời để đáp ứng điều đó. Trong bài viết này, chúng ta sẽ cùng nhau đi trả lời cho câu hỏi Grid View là gì?

Grid View là gì?

Hiện nay, nhiều trang web phân bố nội dung theo dạng một Grid View (lưới), có nghĩa là trang được chia các thành cột:

Nhờ sử dụng Grid View mà việc thiết kế trở nên dễ dàng hơn, giúp cho chúng ta dễ đặt các nội dung lên các vùng phù hợp của trang web.

Một responsive Grid View thường có 12 cột. Tổng chiều rộng của 12 cột này sẽ chiếm 100% chiều rộng của trang web. Các cột sẽ được thu nhỏ hoặc mở rộng theo kích thước của cửa sổ trình duyệt.

Xem ví dụ mẫu ở đây: http://demo.codegym.vn/web/15/responsive-grid/responsive_grid.htm

Xây dựng một Responsive Grid view

Bước 1: Chúng ta thiết lập giá trị box-sizing cho thuộc tính border – box của tất cả các thẻ. Thiết lập này có nghĩa là phần padding và border của các thành phần đều được tính vào trong tổng chiểu rộng hay chiều cao của các thành phần (xem lại bài Box Model để biết cách tính chiều rộng hoặc chiều cao).

* {
    box-sizing: border-box;
}Code language: CSS (css)

Bước 2: Xây dựng một trang responsive đơn giản với 2 cột

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}Code language: CSS (css)

Trong trường hợp này, cột menu có độ rộng là 25% và cột main có độ rộng là 75%. Tổng độ rộng của 2 cột là 100%.

Bước 3: Xây dựng Grid View với 12 cột.

Như vậy, mỗi cột sẽ có độ rộng là 100% / 12 = 8.33%.

Cột col-1 sẽ có độ rộng là 8.33%, cột col-2 sẽ có độ rộng là 8.33% * 2 = 16.66%… tương tự như vậy đối với các cột khác. Cột col-12 sẽ có độ rộng là 100%.

.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%;}Code language: CSS (css)

Bước 4: Tất cả các cột này đều phải trôi về phía bên trái, chúng ta sử dụng thuộc tính float để đạt được hiệu ứng này. Ngoài ra, các cột cũng cần có padding là 15px.

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}Code language: CSS (css)

Bước 5: Thêm thẻ div cho mỗi dòng. Thẻ div này sẽ có class là row. Tất cả các cột đều được đưa vào trong các dòng tương ứng.

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>Code language: HTML, XML (xml)

Bước 6: Đến đây, chúng ta có một vấn đề: Thuộc tính float:left của các cột khiến cho những thành phần khác ở phía sau nó bị dồn lên (hiển thị như là các cột này không tồn tại vậy). Để tránh điều này, chúng ta thêm đoạn mã css sau cho các dòng:

.row::after {
    content: "";
    clear: both;
    display: table;
}Code language: CSS (css)

Bước 7: Cuối cùng, chúng ta thêm một số thuộc tính khác để trông chúng đẹp hơn:

html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.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);
}
.menu li:hover {
    background-color: #0099cc;
}Code language: CSS (css)

Xem kết quả cuối cùng ở đây: http://demo.codegym.vn/web/15/responsive-grid-complete/index.html

Kết luận

Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS. Hy vọng bài viết này sẽ giúp ích rất nhiều cho các bạn trong việc thiết kế bố cục layout của 1 trang web.

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.