Thiết kế các dòng lưới
Các dòng lưới chứa các cột trôi. Vì một dòng lưới bắt dầu một dòng mới bên trong một
page, nó chỉ nên được hiển thị khi cả hai lề (margins) được giải phóng khỏi các cột
được làm trôi trước đó. Vì nó chứa tập các cột trôi của bản thân nó, nó phải có thể
mở rộng trong chiều cao để bao trùm các đối tượng đó (hay không các cột trôi có nguy cơ
chảy vào dòng mới). Như với page footer từ học phần trước, bạn có thể thiết lập các quy
tắc này cho các dòng lưới sử dụng quy tắc style sau:
div.row::after {
clear: both;
content: “”;
display: table;
}
Thiết kế các cột lưới
Mọi cột lưới cần phải được làm cho trôi bên trong dòng của nó. Trong hệ thống lưới bạn thiết
lập cho About Pandaisia Chocolates page (xem sau), các cột lưới được đặt bên trong phần tử div
có tên class chung:
class=”col-numerator-denominator”
nơi numerator-denominator cung cấp width dạng phân số của cột. Ví dụ, col-1-3 class chỉ ra rằng
cột bằng 1/3 tổng width dòng. Để làm trôi tất cả các cột lưới, bạn có thể sử dụng cái chọn thuộc
tính sau, cái khớp với tất cả phần tử div thuộc tính class của chúng bắt đầu với chuỗi text
“col-”:
div[class^=”col-”] {
float: left;
}
Cuối cùng, bạn phải thiết lập width của mỗi column dựa trên tên class của nó. Ví dụ, các phần tử
div với tên class col 1-3 sẽ sử dụng quy tắc style sau để thiết lập width của chúng bằng 1/3 hay
33.33 % của width của phần tử cha – grid row:
div.col-1-3 {width: 33.33%;}
Thêm các quy tắc style cho column width trải từ 25 % đến tới 100 %.
Tiếp tục cùng phong cách, bạn có thể bao gồm các styles cho các column widths khác dựa trên tỉ lệ
phần trăm. Ví dụ, một cột 1/6 sẽ có một width bằng 16.66 %, một cột 1/12 sẽ có width bằng 8.33 %..vv..