Hệ thống lưới chia trang thành các cột và hàng để định hướng vị trí nội dung. Nó mang lại sự trật tự cho bố cục. Nhà thiết kế người Thụy Sĩ Josef Müller-Brockmann đã hệ thống hóa các nguyên tắc lưới vào những năm 1960, và cuốn sách của ông "Hệ thống lưới trong thiết kế đồ họa" vẫn là tài liệu tham khảo tiêu chuẩn. Báo chí, tạp chí và trang web đều dựa vào lưới, mặc dù cách sử dụng của chúng khác nhau.

Một bố cục lưới điển hình có các cột, khoảng cách giữa các cột (gutter) và lề (margin). Các cột chứa nội dung. Khoảng cách giữa các cột phân tách các cột. Lề tạo khung cho trang. Bố cục lưới 12 cột phổ biến trên web vì nó chia đều thành hai phần bằng nhau (một nửa, một phần ba, một phần tư và một phần sáu). Các nhà thiết kế có thể sử dụng nhiều cột cho nội dung rộng hơn hoặc sử dụng một cột duy nhất cho văn bản hẹp hơn. Bố cục lưới không quyết định thiết kế. Nó cung cấp một cấu trúc mà nhà thiết kế có thể tuân theo, uốn nắn hoặc phá vỡ một cách có chủ ý.

Các thành phần lưới

• Cột: các dải dọc dùng để hiển thị nội dung.
• Máng xối: khoảng trống giữa các cột.
• Lề: các cạnh ngoài của bố cục.
• Lưới cơ sở: các đường ngang dùng để căn chỉnh văn bản.

Việc phá vỡ bố cục lưới có thể rất hiệu quả. Một hình ảnh tràn lề bỏ qua các cột sẽ thu hút sự chú ý chính vì nó vi phạm cấu trúc. Nhưng sự phá vỡ này chỉ có tác dụng nếu bố cục lưới đủ mạnh để người xem cảm nhận được.