Mở đầu — vì sao bài này quan trọng
Bạn đã bao giờ mở một thiết kế của mình ra sau vài ngày và cảm thấy "có gì đó sai sai" mà không chỉ ra được chưa? Các phần tử nhìn thì đẹp, màu ổn, font ổn, nhưng tổng thể cứ lệch lạc, chỗ thì chật chội, chỗ thì trống hoác. Chín trên mười trường hợp, thủ phạm không phải màu hay font — mà là bạn đang thiếu một grid system (hệ thống lưới) làm xương sống cho layout.
Grid system là bộ khung vô hình chia màn hình thành những đơn vị đều đặn, để mọi phần tử bạn đặt lên đó đều "neo" vào một vị trí có lý do. Nó chính là thứ khiến website của Shopee, VNG, hay Tiki nhìn gọn gàng, nhất quán trên hàng nghìn màn hình khác nhau — trong khi một trang web tự làm thủ công thì mỗi trang lại lệch một kiểu.
Với vai trò UI Designer, grid không chỉ giúp bạn thiết kế nhanh và đẹp hơn. Nó còn là ngôn ngữ chung với developer. Khi bạn nói "phần này rộng 8 cột" thay vì "phần này rộng khoảng 640px một chút", developer hiểu ngay nên dùng lớp lưới nào trong CSS (như Bootstrap, Tailwind, hay CSS Grid). Grid biến thiết kế của bạn từ một bức tranh tĩnh thành một hệ thống có thể lập trình được — điều này cực kỳ quan trọng khi chúng ta bước sang phần handoff sau này của khóa học.
Trong bài này, chúng ta sẽ mổ xẻ ba thành phần cốt lõi của mọi grid: Columns (cột), Gutters (khoảng cách giữa cột), và Margins (lề ngoài). Nắm chắc ba khái niệm này, bạn có thể dựng grid cho bất kỳ dự án nào.
Khái niệm cốt lõi
Một grid system trong UI thường là column grid — lưới cột. Hãy tưởng tượng bạn có một tờ giấy khổ ngang, rồi kẻ những đường dọc đều nhau để chia nó thành các dải. Mỗi dải là một cột, và toàn bộ khung này nằm gọn trong màn hình. Ba thành phần tạo nên nó là columns, gutters và margins.
Columns — các cột chia layout
Columns là những dải dọc mà nội dung sẽ "ngồi" lên trên. Điều quan trọng cần hiểu: cột không phải là chỗ đặt nội dung cố định, mà là đơn vị đo để bạn quyết định độ rộng của phần tử. Một nút bấm có thể rộng 3 cột, một khối ảnh rộng 6 cột, một sidebar rộng 4 cột.
Số cột phổ biến trong ngành:
- 12 cột — phổ biến nhất cho web desktop. Lý do 12 được yêu thích là vì nó chia hết cho 2, 3, 4, 6 — nghĩa là bạn dễ dàng chia layout thành 2 phần (6+6), 3 phần (4+4+4), 4 phần (3+3+3+3), hay 2/3 và 1/3 (8+4). Sự linh hoạt này là lý do Bootstrap, Foundation và hầu hết framework đều mặc định 12 cột.
- 8 cột — thường dùng cho tablet, khi màn hình hẹp hơn desktop nhưng vẫn cần chia nhiều khối.
- 4 cột — thường dùng cho mobile. Màn hình điện thoại hẹp, chia thành 4 cột là đủ để tạo nhịp mà không quá vụn.
- 16 cột — dùng cho những màn hình rất rộng hoặc layout dày đặc dữ liệu như dashboard.
Gutters — khoảng cách giữa các cột
Gutter là khoảng trống dọc giữa hai cột liền kề. Nếu không có gutter, hai khối nội dung sẽ dính sát nhau và nhìn rất ngột ngạt. Gutter tạo "khoảng thở", giúp mắt phân biệt được đâu là ranh giới giữa các khối.
Con số phổ biến cho gutter là 16px đến 32px. Trên desktop thường dùng 24px hoặc 32px; trên mobile màn hình chật hơn nên gutter nhỏ lại, thường 16px. Một nguyên tắc vàng: gutter nên là bội số của đơn vị nền tảng bạn dùng (thường là 8 — chúng ta sẽ nói kỹ ở bài Spacing System). Vì vậy 8, 16, 24, 32 là những giá trị gutter "chuẩn", còn 17px hay 22px là dấu hiệu bạn đang làm ẩu.
Điểm hay bị bỏ sót: gutter chỉ nằm giữa các cột, không nằm ở hai đầu ngoài cùng. Nếu grid 12 cột có gutter, thì có 11 khoảng gutter (giữa cột 1-2, 2-3, ... 11-12), chứ không phải 12. Hiểu điều này giúp bạn tính toán độ rộng chính xác khi cần.
Margins — lề ngoài
Margin là khoảng trống giữa mép ngoài cùng của grid và cạnh của màn hình (hoặc cạnh của container). Đây là "viền an toàn" để nội dung không bị dính sát vào mép, đặc biệt quan trọng trên mobile — nơi ngón tay cái và cạnh màn hình bo cong dễ che mất nội dung.
Margin thường lớn hơn hoặc bằng gutter. Trên mobile, margin phổ biến là 16px hoặc 20px mỗi bên. Trên desktop, margin có thể lớn hơn nhiều — đôi khi 64px, 80px, hoặc dùng cơ chế "auto margin" để căn grid vào giữa màn hình khi màn hình rộng hơn container tối đa.
Công thức liên kết ba thành phần
Ba thành phần này gắn với nhau bằng một công thức đơn giản. Với một container có chiều rộng W, số cột n, gutter g, và margin m mỗi bên:
Chiều rộng khả dụng = W - (2 × m)
Chiều rộng 1 cột = (Chiều rộng khả dụng - (n-1) × g) / n
Ví dụ: container 1440px, 12 cột, gutter 24px, margin 80px mỗi bên.
- Chiều rộng khả dụng = 1440 - 160 = 1280px
- Tổng gutter = 11 × 24 = 264px
- Chiều rộng 1 cột = (1280 - 264) / 12 ≈ 84,7px
Tình huống thực tế
Ví dụ 1 — Tiki dựng lại grid cho trang danh mục sản phẩm
Giả sử đội thiết kế của một sàn thương mại điện tử lớn như Tiki cần làm lại trang danh mục. Ban đầu, mỗi designer trong đội tự đặt sản phẩm theo cảm tính: người thì để 4 sản phẩm một hàng, người để 5, khoảng cách giữa các thẻ sản phẩm lúc 18px lúc 22px. Kết quả là khi ghép các trang lại, chúng nhìn như của hai website khác nhau.
Đội trưởng quyết định chuẩn hóa bằng grid 12 cột, gutter 24px, margin 32px, container tối đa 1280px. Mỗi thẻ sản phẩm chiếm 2 cột — nghĩa là một hàng vừa đúng 6 sản phẩm (2×6=12). Khi màn hình hẹp lại thành tablet, họ chuyển sang grid 8 cột và mỗi thẻ vẫn 2 cột, tức 4 sản phẩm một hàng. Trên mobile, grid 4 cột, mỗi thẻ 2 cột, thành 2 sản phẩm một hàng.
Bài học: Khi mọi thẻ đều "neo" vào cùng một grid, số lượng sản phẩm mỗi hàng thay đổi mượt mà theo màn hình mà không designer nào phải quyết định thủ công. Developer cũng chỉ cần một quy tắc CSS duy nhất thay vì viết riêng cho từng trang.
Ví dụ 2 — Một startup fintech ở TP.HCM và cái bẫy "grid đẹp trên Figma nhưng vỡ trên thật"
Một startup fintech giả định tên Momo-like nhận feedback rằng trang dashboard web của họ nhìn "chật chội một cách khó chịu" trên laptop 13 inch của nhân viên. Designer kiểm tra lại thì thấy nguyên nhân: cô ấy thiết kế grid với margin cố định 120px mỗi bên vì trên màn hình Figma 1920px nó nhìn rất sang. Nhưng laptop nhân viên chỉ 1366px — sau khi trừ 240px margin hai bên, vùng nội dung chỉ còn hơn 1100px, khiến các bảng số liệu bị nén.
Giải pháp: thay margin cố định bằng grid có container tối đa 1200px căn giữa, margin tối thiểu 24px. Trên màn hình lớn, khoảng trống hai bên tự động nở ra để căn giữa; trên màn hình nhỏ, margin co lại còn 24px để dành tối đa không gian cho dữ liệu.
Bài học: Đừng thiết kế grid chỉ dựa trên một kích thước màn hình duy nhất. Margin cố định quá lớn là kẻ thù của màn hình nhỏ. Hãy nghĩ theo hướng "container tối đa + margin tối thiểu" để grid thích ứng.
Ví dụ 3 — Landing page với nội dung phá vỡ grid có chủ đích
Một agency thiết kế landing page cho chiến dịch ra mắt sản phẩm của một thương hiệu mỹ phẩm Việt. Toàn bộ nội dung — tiêu đề, đoạn văn, nút CTA — đều nằm gọn trong grid 12 cột, phần chữ chiếm 8 cột giữa để dễ đọc. Nhưng có một ảnh banner hero mà designer cố tình cho tràn ra ngoài margin, chạm sát hai mép màn hình (full-bleed).
Đây không phải lỗi. Đó là kỹ thuật breaking the grid có chủ đích: 95% nội dung tuân thủ grid để tạo trật tự, còn một vài phần tử được phá grid để tạo điểm nhấn thị giác. Cái hay là designer vẫn giữ phần chữ chồng lên ảnh nằm đúng trong grid, nên dù ảnh tràn viền, thông điệp vẫn được căn chỉnh ngay ngắn.
Bài học: Grid là để phục vụ bạn, không phải để trói bạn. Nhưng bạn chỉ được phép phá grid khi đã thực sự hiểu và tuân thủ nó ở phần còn lại. Phá grid vì cố ý thì gọi là nghệ thuật; phá grid vì không có grid thì gọi là lộn xộn.
Hướng dẫn từng bước
Dưới đây là quy trình dựng grid cho một dự án web mới, làm trong Figma nhưng nguyên tắc áp dụng cho mọi công cụ.
Bước 1 — Xác định breakpoint mục tiêu. Trước khi kẻ cột, hãy quyết định bạn thiết kế cho màn hình nào. Thông thường bắt đầu với desktop 1440px (khung Figma quen thuộc), sau đó là tablet 768px và mobile 375px. Grid sẽ khác nhau ở mỗi breakpoint.
Bước 2 — Chọn số cột theo breakpoint. Áp dụng quy tắc chung: desktop 12 cột, tablet 8 cột, mobile 4 cột. Đây là điểm khởi đầu an toàn cho 90% dự án.
Bước 3 — Đặt container tối đa và margin. Với desktop, đặt container tối đa (ví dụ 1200px hoặc 1280px) căn giữa. Với mobile, không cần container tối đa, chỉ cần margin hai bên 16-20px.
Bước 4 — Chọn gutter là bội số của 8. Desktop 24px hoặc 32px, mobile 16px. Ghi nhớ: gutter và margin nên "ăn khớp" với hệ spacing tổng thể của dự án.
Bước 5 — Tạo layout grid trong Figma. Chọn frame, vào panel bên phải, mục Layout Grid, thêm một grid loại "Columns". Nhập số cột, gutter, và chọn kiểu margin (Stretch để co giãn, hoặc Center với width cố định). Bật hiển thị grid bằng phím tắt Ctrl/Cmd + G để nhìn thấy các đường lưới.
Bước 6 — Đặt phần tử theo cột, không theo pixel tùy hứng. Khi kéo một khối, hãy để cạnh của nó snap vào đường cột. Tự hỏi "khối này rộng mấy cột?" thay vì "khối này rộng bao nhiêu px?".
Bước 7 — Lưu grid thành Grid Style để tái sử dụng. Trong Figma, bạn có thể lưu layout grid thành một style dùng chung, để mọi frame trong dự án dùng đúng một grid. Điều này đảm bảo tính nhất quán khi cả đội cùng làm.
Bước 8 — Kiểm tra ở nhiều màn hình. Trước khi kết thúc, resize thử hoặc dựng các frame ở cả ba breakpoint để chắc chắn grid không vỡ ở màn hình nhỏ nhất.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng số cột lẻ khó chia. Chọn 10 hay 14 cột nghe có vẻ hợp lý nhưng lại khó chia đều. 12 chia hết cho 2, 3, 4, 6; 10 chỉ chia được cho 2 và 5. Hãy bám vào 12 cho desktop trừ khi có lý do rất cụ thể.
Lỗi 2 — Gutter và margin không thuộc hệ spacing. Đặt gutter 22px hay margin 30px là dấu hiệu bạn "áng chừng". Luôn dùng bội số của 8 (hoặc 4 cho các giá trị nhỏ) để grid ăn khớp với phần còn lại của thiết kế.
Lỗi 3 — Quên margin trên mobile. Nhiều bạn thiết kế mobile để nội dung chạm sát mép màn hình. Kết quả là chữ dính viền, nút bấm khó chạm ở góc. Luôn chừa margin tối thiểu 16px mỗi bên trên mobile.
Lỗi 4 — Grid chỉ đúng ở một màn hình. Thiết kế grid đẹp trên 1920px rồi quên kiểm tra 1366px là lỗi kinh điển (như ví dụ fintech ở trên). Luôn nghĩ đa breakpoint ngay từ đầu.
Lỗi 5 — Nhầm grid cột với grid pixel. Column grid (chia cột) khác với grid nền 8px (chia ô vuông nhỏ để căn spacing). Cả hai đều hữu ích và thường dùng cùng nhau, nhưng đừng lẫn lộn vai trò của chúng.
Mẹo: Khi bí không biết chọn grid nào, mở website của một sản phẩm bạn ngưỡng mộ, bật DevTools của trình duyệt lên và đo thử độ rộng container, gutter, margin của họ. Bạn sẽ nhanh chóng thấy các con số "chuẩn ngành" lặp đi lặp lại — và học được rất nhiều từ đó.
Mẹo: Đặt grid ở lớp dưới cùng và bật/tắt nó thường xuyên khi làm việc. Grid là công cụ để căn chỉnh, không phải để nhìn liên tục — bật khi cần neo phần tử, tắt khi muốn đánh giá tổng thể thẩm mỹ.
Bài tập thực hành
- Dựng grid ba breakpoint. Mở Figma, tạo ba frame: 1440px, 768px, 375px. Áp grid lần lượt 12/8/4 cột với gutter 24/16/16px và margin phù hợp. Lưu lại thành Grid Style. Mục tiêu: quen tay với panel Layout Grid.
- Tính toán bằng tay. Với container 1280px, 12 cột, gutter 24px, margin 40px mỗi bên — hãy tính độ rộng của một cột và độ rộng của một khối rộng 5 cột (gồm cả gutter bên trong). Đây là kỹ năng bạn cần khi giải thích với developer.
- Bóc tách grid của một website thật. Chọn một trang bạn thích (ví dụ trang chủ Shopee, VNExpress, hoặc Tiki). Dùng DevTools đo container, gutter, margin. Viết ra ba con số đó và đoán họ đang dùng bao nhiêu cột.
- Bố trí lại một layout lộn xộn. Lấy một thiết kế cũ của bạn (hoặc tự chụp một trang web bố cục kém), áp một grid 12 cột lên trên, rồi kéo lại các phần tử để chúng neo vào cột. So sánh trước/sau và ghi lại cảm nhận.
Tóm tắt
Grid system là bộ xương vô hình giúp mọi phần tử trong thiết kế của bạn có một vị trí "có lý do", tạo nên sự nhất quán và chuyên nghiệp mà mắt người cảm nhận được ngay cả khi không biết vì sao.
Ba thành phần cốt lõi cần nhớ:
- Columns — các dải dọc chia layout, phổ biến 12 cột desktop, 8 cột tablet, 4 cột mobile. Chọn 12 vì nó chia đều cho 2, 3, 4, 6.
- Gutters — khoảng cách giữa cột, thường 16-32px và nên là bội số của 8. Nhớ rằng gutter chỉ nằm giữa các cột, không ở hai đầu.
- Margins — lề ngoài giữa grid và mép màn hình, tối thiểu 16px trên mobile, và nên dùng cơ chế container tối đa + căn giữa trên desktop.