Để thiết kế giao diện web tương thích với các loại kích thước màn hình khác nhau, người ta căn cứ vào kích thước chiều rộng của màn hình, chiều dài thì không quan tâm.
Việc phân định các khối hiển thị khác nhau cho chính xác ở các loại màn hình, người ta chia màn hình thành 12 cột (hiện tại có một số thì chia 15 cột, nhưng chuẩn chung là 12 cột), các cột này có kích thước bằng nhau theo tỉ lệ %.
Với 12 cột thì mỗi cột sẽ có chiều rộng là 100/12 = 8.33333333333…. %, nhưng cơ bản chỉ cần lấy 2 số lẻ phần thập phân hoặc muốn chính xác cao thì lấy nhiều số lẻ thập phân hơn: 8.33 hoặc 8.333333, … tùy thích.
Ví dụ như hệ thống lưới mô tả ở ảnh này:
*** Với bài toán như trong ảnh trên ta tính toán kích thước cho các khối như sau:
– Khối đầu trang chiếm 12 cột ==> width: 100%;
– Khối menu trái chiếm 3 cột ==> với 12 cột chiếm mất 3 cột vậy là 1/4 ==> chiều rộng khối menu trái là 100/4 = 25%
– Khối ở giữa: chiếm 6 cột ==> chiếm 1/2 của 12 cột ==> chiều rộng là 100/2 = 50%;
– Khối bên phải chiếm 3 cột ==> là 25%;
– Khối dưới cuối cùng chiếm 12 cột ==> là 100%
Bây giờ các khối khác nhau, để viết css cho các khối ta đặt tên các class, thì mỗi khối quy ước 1 cái tên cho dễ nhận diện:
– Khối chiếm 12 cột đặt tên là: col-12
– Khối chiếm 3 côt đặt tên là: col-3
– Khối chiếm 6 cột đặt tên là: col-6
–> tương tự đặt tên cho các khối còn lại => ta có 12 trường hợp từ 1 cột đến 12 cột: col-1, col-2, col-3, col-4, col….
Kết quả viết CSS cho các cột như sau:
.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%;}Khi thiết kế css lưới sẽ để sẵn 12 class như vậy, có thể 1 số cái không dùng đến nhưng cũng cần để cho đủ. Đến khi cần dùng sẽ chỉ gọi tên cột ra làm việc.