[Bài đọc] Grid View

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

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

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

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

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>

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

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