<>Grid System là một hệ thống lưới giúp căn chỉnh, tổ chức và sắp xếp nội dung trong giao diện UI/UX một cách có trật tự và nhất quán. Đây là nền tảng quan trọng để tạo ra bố cục gọn gàng, dễ đọc và dễ sử dụng.
/Các loại Grid System phổ biến
📌 1. Column Grid (Lưới cột)
– Phổ biến nhất trong thiết kế UI/UX.
– Chia màn hình thành các cột dọc có khoảng cách đều nhau (gutter).
Dùng cho:
– Website, ứng dụng di động, dashboard.
– Ví dụ: Bootstrap sử dụng 12-column grid.
📌 2. Modular Grid (Lưới ô vuông)
– Kết hợp cả hàng và cột, tạo thành các ô vuông đồng nhất.
Dùng cho:
– Dashboard, thư viện ảnh, UI phức tạp.
– Ví dụ: Grid của Pinterest.
📌 3. Baseline Grid (Lưới căn chỉnh theo dòng chữ)
– Lưới ngang giúp căn chỉnh typography và nội dung văn bản.
Dùng cho:
– Bài viết, blog, trang đọc sách.
– Ví dụ: Các bài báo trên Medium.
📌 4. Hierarchical Grid (Lưới phân cấp)
– Không có cột/hàng cố định mà thay đổi theo tầm quan trọng của nội dung.
Dùng cho:
– Landing page, thiết kế sáng tạo.
– Ví dụ: Giao diện Apple.com.
/Cấu trúc của Grid System
✅ Columns (Cột): Chia màn hình thành nhiều cột dọc.
✅ Gutter (Khoảng cách giữa các cột): Giúp nội dung không bị dính vào nhau.
✅ Margin (Lề): Khoảng trống ngoài cùng giúp UI thoáng hơn.
/Best Practices khi sử dụng Grid
✅ Dùng hệ thống 8pt Grid – Chia tỷ lệ kích thước theo bội số của 8px giúp UI đồng nhất.
✅ Chọn số cột phù hợp: 12 cột cho web, 4-6 cột cho mobile.
✅ Luôn căn nội dung theo lưới – Tránh bố cục mất cân bằng.
✅ Kiểm tra Responsive Design – Đảm bảo lưới hoạt động tốt trên mọi màn hình.
