Grid là gì? Cách dùng lưới để thiết kế website nhất quán
Khi mỗi section có chiều rộng, khoảng cách và cách căn khác nhau, giao diện trông “hơi sai” dù khó chỉ ra một lỗi cụ thể. Grid tạo bộ xương giúp designer và developer thống nhất vị trí, nhịp và responsive behavior.
Tóm tắt nhanh: Grid là hệ thống đường/cột/hàng dùng để tổ chức phần tử. Grid không buộc mọi thiết kế phải cứng nhắc; nó tạo quy tắc nền để hierarchy và sự phá cách có chủ đích.
Grid là gì?
Grid gồm margin, column, gutter, row và baseline. Trong web, grid thay đổi theo viewport và content. Một desktop grid 12 cột có thể trở thành 4 cột hoặc một luồng đơn trên mobile.
Vai trò của Grid
- tạo alignment;
- giữ consistency;
- tăng tốc thiết kế/build;
- hỗ trợ responsive;
- giúp component tái sử dụng;
- tạo visual rhythm;
- làm collaboration dễ hơn.
Grid không tự tạo hierarchy. Designer vẫn cần quyết định span, density và emphasis.
1. Manuscript Grid
Một vùng nội dung chính, thường dùng cho bài viết, ebook và tài liệu. Chiều rộng dòng cần được kiểm soát để đọc thoải mái.
2. Column Grid
Chia không gian thành cột. Phù hợp website, dashboard và editorial layout. Component có thể span nhiều cột.
3. Modular Grid
Kết hợp cột và hàng thành module. Hữu ích cho catalog, gallery, data-heavy interface, nhưng dễ tạo giao diện quá đều nếu không có hierarchy.
4. Hierarchical Grid
Không chia đều tuyệt đối; cấu trúc dựa trên tầm quan trọng và nội dung. Phù hợp homepage, product page và layout có visual lớn.
5. Baseline Grid
Căn text và khoảng cách theo nhịp dọc. Giúp typography qua nhiều column trông thống nhất.
Thành phần của web grid
Container
Giới hạn chiều rộng nội dung và giữ margin an toàn. Có thể fluid đến một max-width.
Columns
Số cột là công cụ chia tỷ lệ, không phải số card bắt buộc trên một hàng.
Gutters
Khoảng giữa cột. Gutter quá nhỏ làm nội dung dính; quá lớn giảm không gian hữu ích.
Margins
Khoảng từ container đến viewport. Margin responsive giúp nội dung không sát mép mobile.
Spacing scale
Grid ngang cần đi cùng spacing theo chiều dọc. Dùng scale 4/8 hoặc modular scale giúp thống nhất.
Cách tạo responsive grid
Một ví dụ CSS Grid:
.layout {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 2rem);
width: min(100% - 2rem, 80rem);
margin-inline: auto;
}Ở mobile, component có thể span toàn bộ. Ở tablet/desktop, dùng grid-column hoặc template phù hợp. Tránh giữ 12 cột nếu content không cần.
Grid trong Figma và code
Design grid chỉ hữu ích khi có thể chuyển thành rule code. Handoff nên ghi:
- max-width;
- margin từng breakpoint;
- column count;
- gutter;
- component span;
- behavior khi content dài;
- breakpoint logic.
Không nên gửi chỉ screenshot với đường grid mà không giải thích constraint.
Khi nào nên phá Grid?
Có thể cho hero image, pull quote, decorative shape hoặc section cần emphasis. Phần phá grid vẫn cần liên hệ với container và không gây overflow/accessibility issue.
Phá grid hiệu quả khi người xem vẫn cảm nhận cấu trúc nền. Nếu mọi phần đều phá, không còn điểm nhấn.
Những lỗi thường gặp
- Grid chỉ có trong file thiết kế, không map sang CSS.
- Dùng quá nhiều max-width.
- Gutter thay đổi tùy ý.
- Ép desktop grid xuống mobile.
- Mọi card cùng kích thước dù nội dung khác vai trò.
- Không test text dài/localization.
- Bỏ baseline và vertical rhythm.
- Container lồng nhau tạo alignment lệch.
Checklist
- Container có quy tắc rõ?
- Column/gutter có token?
- Breakpoint theo content hay theo thiết bị tùy ý?
- Component span được mô tả?
- Mobile margin đủ?
- Text line length thoải mái?
- Empty/error state có giữ grid?
- Ảnh có crop đúng?
- Design và code dùng cùng logic?
Mikel Studio có thể hỗ trợ gì?
Mikel Studio có thể review responsive layout và design-to-code system, chuyển grid, spacing và component constraint thành rule có thể triển khai và bảo trì.
Yêu cầu review responsive layout
Câu hỏi thường gặp
Website có bắt buộc dùng grid 12 cột không?
Không. Chọn số cột theo content và component. 12 phổ biến vì chia được nhiều tỷ lệ.
CSS Grid hay Flexbox?
Grid tốt cho bố cục hai chiều; Flexbox tốt cho một chiều. Nhiều giao diện dùng cả hai.
Grid có làm thiết kế nhàm chán không?
Không. Grid tạo consistency; hierarchy, imagery, typography và cách span tạo cá tính.
Kết luận
Grid là thỏa thuận giữa nội dung, thiết kế và code. Khi container, cột, gutter và spacing có quy tắc, team thiết kế nhanh hơn, giao diện responsive ổn định hơn và sự phá cách cũng thuyết phục hơn.