Mặc dù cả hai hình ảnh này chỉ đơn giản là một tập hợp của hình chữ nhật, bố trí ở đầu trang có vẻ tốt hơn so với phía dưới.

Hình ảnh dưới là mô hình không rõ ràng, không trình tự, hoặc mục tiêu cụ thể, nó chỉ trông giống như một hình dạng ngẫu nhiên.

Thiết kế dựa trên lưới là một trong những cách đơn giản và hữu dụng nhất để tạo ra trật tự trên một trang. Nó có vẻ lạnh lùng và cứng nhắc, nhưng hãy nhớ rằng cách thiết kế này là cực kỳ hiệu quả, và thậm chí khá linh hoạt.

Tại sao tôi cần thiết kế trên hệ thống lưới?

The 960 Grid System và các công cụ khác cung cấp một cách nhanh chóng và dễ dàng hệ thống lưới bằng cách sử dụng CSS. Nó đã được thử qua các trình duyệt và tối ưu hóa độ rộng cột để bạn thiết kế nội dung.

960 Grid System

960 Grid System là cách đơn giản để websites và sử dụng lưới cho độ rộng là 960 pixel.

Lý do chính để sử dụng kích cỡ 960 pixel là nó tương thích với hầu hết độ rộng của màn hình người sử dụng.

960 GS có 2 phần: 12-column grid (lưới 12 cột) và 16-column grid (lưới 16 cột)

Trong phiên bản 12 cột, cột hẹp nhất là 60 pixel. Mỗi cột sau rộng hơn 80 pixel

Giá trị các cột sẽ là: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 và 940.

Tương tự, trong 16 cột, cột hẹp nhất là 40 pixels wide. Mỗi cột sau rộng hơn 60 pixel.

Giá trị các cột sẽ là: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 và 940.

CSS Classes

Khi bạn nhìn vào biểu đồ trên, hãy xem xét mỗi một thanh màu xanh đen nằm ngang như một lớp CSS trong các hệ thống lưới 960 GS.

Để tạo một đối tượng trong bố cục của bạn đó, bạn chỉ cần gán class đó cho thẻ div!

Các Class đặt tên theo kích thước của chúng với grid_1 hẹp nhất vàgrid_12 là class là rộng nhất ( grid_16 là rộng nhất trong phiên bản 16-cột).

Vì vậy, hãy nghĩ đến cách bố trí thiết kế bằng CSS tương ứng độ rộng thay vì là pixel.

Ví dụ, sử dụng phiên bản 12-cột, nếu bạn có 3 thẻ divs của văn bản và bạn muốn được hiển thị theo bố trí 3-cột, chỉ cần gán class grid_4 cho mỗi cột với tổng số 12 (4+4+4=12).

Tương tự, gán grid_4 CSS class cho phiên bản 16-cột để dễ dàng tạo thiết kế 4 cột (4+4+4+4=16).

Để chắc chắn, bạn nên đặt các cột của mình trong thẻ div có class container_12 (tương tự với hệ thống cột 16)

hãy xem xét hai ví dụ hình dưới đây. Ví dụ đầu tiên là bố trí thiết kế 4-cột bằng cách sử dụng grid_3 .

Tuy nhiên, trong phiên bản thứ hai, tôi đã đẩy cột đầu tiên và kéo cột cuối cùng, kết quả là vị trí của nó thay đổi.

Hãy ghi nhớ rằng bạn có thể đẩy các cột xa như bạn muốn. Nếu tôi đã muốn đẩy xa thêm hai cột trên, tôi sẽ gán class push_2

Việc đẩy / kéo có ý nghĩa lớn đối với cách nội dung trong tài liệu HTML.

Đầu tiên bạn muốn để logo tay trái, và sau đó bạn lại thực sự muốn nó xuất hiện ở trung tâm của trang.

Trước khi pushing/pulling:

Bạn dùng đoạn code HTML sau:

Đây là kết quả

Sau khi pushing/pulling:

Những khoảng không mở

Nếu bạn muốn tạo ra không gian mở (một thiết kế tốt luôn có không gian mở). Để thực hiện điều này, áp dụng prefix và suffix class. Nó giống vớipush và pull class.