Khi nhìn một trang web gọn gàng, mọi tiêu đề, ảnh và nút bấm như đứng trên những đường thẳng vô hình, ít ai biết phía sau là một hệ lưới đang điều phối. Đây là công cụ nền tảng mà designer lẫn dev đều dựa vào để bố cục không bị lệch nhịp mỗi khi đổi kích thước màn hình.
Ba thành phần tạo nên một grid system
Một hệ lưới chỉ gồm ba phần đơn giản, nhưng hiểu đúng vai trò từng phần là chìa khoá dùng nó hiệu quả.
- Cột (column) — các dải dọc đều nhau, là nơi đặt nội dung. Trên web, bề rộng cột thường tính theo phần trăm chứ không phải số pixel cố định, để cột tự co giãn theo bề ngang màn hình.
- Máng (gutter) — khoảng trống giữa hai cột liền nhau, giữ cho nội dung không dính vào nhau. Material Design khuyến nghị máng khoảng 24px cho desktop.
- Lề (margin) — khoảng trắng hai bên rìa trang, ngăn nội dung chạm sát mép trình duyệt. Material Design gợi ý lề khoảng 32px ở màn hình lớn.
Cột là phần “có nội dung”, còn máng và lề là phần “thở”. Tổng của cả ba luôn lấp đầy đúng bề ngang vùng chứa.
Vì sao lưới 12 cột phổ biến
Hầu hết design system lớn — Material Design, Adobe Spectrum, U.S. Web Design System — đều chọn lưới 12 cột làm chuẩn. Lý do nằm ở phép chia: số 12 chia hết cho 2, 3, 4 và 6.
| Bố cục muốn dựng | Cách chia trên lưới 12 cột |
|---|---|
| Hai cột bằng nhau | 6 + 6 |
| Ba cột bằng nhau | 4 + 4 + 4 |
| Bốn cột (ví dụ lưới sản phẩm) | 3 + 3 + 3 + 3 |
| Nội dung chính + thanh bên | 8 + 4 |
Một lưới 8 cột không chia đẹp được thành ba phần, còn 12 cột thì xoay xở hầu hết tình huống mà không để lại số lẻ. Đây là lý do nó trở thành mặc định.
Lưới giúp gì cho tính nhất quán và responsive
Hai giá trị lớn nhất của một grid system là nhất quán và khả năng co giãn.
Về nhất quán: khi mọi khối đều bám mép cột, mắt người đọc bắt được nhịp thẳng hàng giữa các phần tưởng chừng rời rạc. Một tấm ảnh ở khối trên và một đoạn chữ ở khối dưới cùng khởi đầu từ một đường dọc — sự thẳng hàng đó tạo cảm giác trang được sắp đặt có chủ đích chứ không tuỳ tiện.
Về responsive (đáp ứng — tự thích nghi theo cỡ màn hình): vì cột tính theo phần trăm, cả lưới tự co lại khi màn hình hẹp đi. Các design system còn đổi số lượng cột theo breakpoint (điểm gãy — ngưỡng bề rộng để đổi bố cục): điện thoại thường 4 cột, máy tính bảng 8 cột, desktop 12 cột. Một khối chiếm 6/12 cột trên desktop có thể chuyển sang chiếm trọn 4/4 cột trên điện thoại — nội dung tự xếp lại mà không cần thiết kế lại từ đầu.
Dựng grid bằng CSS Grid và Flexbox
Trong code, có hai công cụ chính để hiện thực hoá lưới, và chúng bổ trợ nhau chứ không loại trừ.
CSS Grid cho khung tổng thể
CSS Grid là công cụ hai chiều (cùng lúc kiểm soát hàng và cột), hợp nhất để dựng bộ khung 12 cột. Cú pháp gọn:
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px; /* chính là máng (gutter) */
}
/* một khối chiếm 8 cột */
.main { grid-column: span 8; }
/* thanh bên chiếm 4 cột */
.sidebar { grid-column: span 4; }Đơn vị 1fr nghĩa là “một phần bằng nhau” của không gian còn lại, nên 12 cột luôn chia đều dù màn hình rộng hẹp ra sao. Thuộc tính gap lo luôn phần máng.
Flexbox cho nội bộ component
Flexbox là công cụ một chiều, mạnh ở việc xếp một hàng phần tử và phân bổ khoảng cách — ví dụ các nút trong một thanh, hay các thẻ trong một dải. Mẫu thực dụng được khuyến nghị hiện nay là: dùng CSS Grid cho bố cục trang (header, sidebar, main, footer), dùng Flexbox cho bên trong từng component. Kết hợp cả hai không phải là “ăn gian” mà là cách làm đúng.
Cả hai đều đã được mọi trình duyệt phổ biến hỗ trợ từ lâu (CSS Grid thành chuẩn nền từ 2017), nên không còn rào cản tương thích.
Lưới tự đếm cột không cần media query
Với những dải thẻ lặp lại, một dòng CSS thay được nhiều media query:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}Trình duyệt tự nhét tối đa số thẻ rộng ít nhất 280px vừa khít, rồi giãn đều phần dư — màn hình rộng ra thì tự thêm cột, hẹp lại thì tự bớt.
Grid khác white space ở chỗ nào
Dễ nhầm grid với khoảng trắng vì cả hai đều liên quan tới khoảng cách. Nhưng vai trò khác hẳn: grid quyết định nội dung NẰM Ở ĐÂU (căn theo cột nào, rộng mấy cột), còn khoảng trắng quyết định nội dung THỞ RA SAO (đệm quanh chữ, giãn dòng, tách nhóm). Grid là bộ xương xếp vị trí; khoảng trắng là hơi thở giữa các phần. Một trang có thể bám lưới hoàn hảo mà vẫn ngột ngạt nếu thiếu khoảng trắng, và ngược lại. Để hiểu sâu mặt còn lại, xem bài vai trò của khoảng trắng trong thiết kế.
Góc thực chiến từ Web22
Khi bạn nhờ Web22 dựng website, một quy ước được giữ xuyên suốt: bản thiết kế trên Figma và bản code dùng cùng một con số lưới — cùng 12 cột, cùng giá trị máng và lề. Khi bản thiết kế và code khớp số như vậy, khâu chuyển giao gần như không tam sao thất bản, khối nào trên thiết kế chiếm mấy cột thì lên code đúng bấy nhiêu cột.
Câu hỏi thường gặp
Bắt buộc phải dùng đúng 12 cột không?
Không bắt buộc. 12 cột chỉ là lựa chọn linh hoạt nhất vì chia đẹp nhiều cách. Trang đơn giản có thể dùng 4 hoặc 6 cột, miễn nhất quán xuyên suốt.
Nên dùng CSS Grid hay Flexbox?
Dùng cả hai. Grid lo bố cục hai chiều của trang; Flexbox lo việc xếp một hàng phần tử bên trong từng component. Chúng không đối đầu nhau.
Máng và lề nên đặt bao nhiêu?
Tuỳ thiết kế, nhưng tham chiếu của Material Design là máng khoảng 24px và lề khoảng 32px ở desktop. Quan trọng là chọn một bộ giá trị rồi dùng nhất quán.
Nếu bạn muốn một bộ khung lưới được dựng đồng bộ từ bản thiết kế đến code, tham khảo dịch vụ thiết kế giao diện website của Web22.