Bố cục và hệ lưới trong thiết kế: Grid, khoảng cách 8pt và quy tắc căn chỉnh

Có một dấu hiệu rất dễ nhận ra ở thiết kế của người mới: mọi thứ đều "gần đúng". Tiêu đề lệch trái 3px so với ảnh, hai khối cách nhau 17px trong khi hai khối khác cách nhau 23px, lề trái 40px còn lề phải 36px. Từng lỗi đều nhỏ, nhưng cộng lại tạo cảm giác cẩu thả mà người xem không gọi tên được.

Hệ lưới (grid) sinh ra để giải quyết đúng vấn đề đó. Nó biến hàng loạt quyết định cảm tính thành một bộ quy tắc: mọi phần tử đều nằm trên một trục, mọi khoảng cách đều là bội số của một con số.

Vì sao cần grid

Nhất quán: các trang khác nhau vẫn trông như cùng một bộ.
Nhanh hơn: bạn không phải quyết định lại vị trí cho từng phần tử.
Dễ làm việc nhóm: nhiều người cùng làm đồ án vẫn ra kết quả đồng bộ.
Dễ chuyển sang code: lập trình viên dựng giao diện theo grid nhanh và ít sai lệch hơn.

Hệ lưới không giới hạn sáng tạo — nó loại bỏ những quyết định vụn vặt để bạn dồn sức cho phần quan trọng.

Cấu trúc một hệ lưới

Một grid gồm bốn thành phần:

Thành phần	Là gì	Ghi chú
Cột (column)	Các dải dọc chứa nội dung	Web thường 12 cột, in ấn 6–8 cột
Máng (gutter)	Khoảng trống giữa hai cột	Thường 16–24px trên web
Lề (margin)	Khoảng trống mép ngoài	Trên điện thoại tối thiểu 16px
Dòng cơ sở (baseline)	Lưới ngang canh chữ	Quan trọng với ấn phẩm nhiều chữ

Vì sao 12 cột? Vì 12 chia hết cho 2, 3, 4 và 6 — bạn có thể tạo bố cục 2 phần, 3 phần, 4 phần mà không cần đổi lưới. Một khối chiếm 6 cột là nửa trang, 4 cột là một phần ba, 3 cột là một phần tư.

Hệ khoảng cách 8pt: quy tắc dễ áp dụng nhất

Chọn một đơn vị cơ sở (thường là 8) và mọi khoảng cách, kích thước đều là bội số của nó: 8, 16, 24, 32, 40, 48, 64. Với các chi tiết nhỏ, cho phép thêm mốc 4.

Ví dụ áp dụng:

Khoảng cách giữa nhãn và ô nhập: 8px
Khoảng cách giữa hai trường trong cùng biểu mẫu: 16px
Khoảng đệm bên trong thẻ nội dung: 24px
Khoảng cách giữa hai khối nội dung lớn: 48–64px

Lợi ích ngay lập tức: bạn không còn phải nghĩ "nên để 17 hay 19px". Chỉ có vài lựa chọn, và lựa chọn nào cũng hài hòa với phần còn lại.

Quy tắc vàng của khoảng cách: khoảng cách bên trong một nhóm phải nhỏ hơn khoảng cách giữa các nhóm. Nếu vi phạm, người xem sẽ gom nhầm thông tin — đúng như luật gần nhau trong nguyên lý Gestalt.

Các kiểu bố cục thường dùng

Lưới cột (Column grid)

Phổ biến nhất, dùng cho web, tạp chí, báo cáo. Nội dung xếp vào các cột, đôi khi trải rộng nhiều cột để tạo nhấn.

Lưới module (Modular grid)

Cột kết hợp hàng, tạo thành các ô vuông. Rất hợp với thư viện ảnh, danh mục sản phẩm, bảng thông tin, và các trang portfolio nhiều hình.

Lưới phân cấp (Hierarchical grid)

Không đều nhau, xây theo nội dung cụ thể. Thường thấy ở trang chủ website hay poster — một khối lớn chiếm ưu thế, phần còn lại nhỏ hơn.

Bố cục một cột

Đừng xem thường. Với bài viết dài, landing page hay slide, một cột với chiều rộng nội dung được kiểm soát (khoảng 60–75 ký tự mỗi dòng) là lựa chọn tốt nhất.

Quy tắc một phần ba và tỷ lệ vàng

Quy tắc một phần ba: chia khung thành 3×3, đặt điểm nhấn tại giao điểm của các đường. Đây là công cụ nhanh để tránh đặt mọi thứ vào chính giữa — bố cục đặt lệch thường sinh động hơn.

Tỷ lệ vàng (khoảng 1:1.618): dùng để chia tỷ lệ hai khối, hoặc tạo thang cỡ chữ. Đừng thần thánh hóa nó; hãy coi đây là một điểm khởi đầu hợp lý chứ không phải công thức đảm bảo cái đẹp.

Điểm nhìn đầu tiên: ở văn hóa đọc từ trái sang phải, mắt thường quét theo hình chữ Z (với trang ít nội dung) hoặc chữ F (với trang nhiều chữ). Vì vậy góc trên bên trái là vị trí giá trị nhất, và lời kêu gọi hành động thường được đặt ở cuối đường quét.

Áp dụng cụ thể theo loại sản phẩm

Poster in (A3, A2)

Chừa lề an toàn tối thiểu 10mm, tránh đặt chữ sát mép vì máy cắt có sai số.
Đặt file ở 300 DPI, hệ màu CMYK.
Dùng lưới 6 cột; tiêu đề chiếm trọn bề ngang, thông tin phụ chia 2–3 cột.
Kiểm tra bằng cách in thử khổ A4 và dán lên tường, đứng cách 2 mét.

Slide thuyết trình (16:9)

Lề an toàn 5% mỗi cạnh — máy chiếu thường cắt mất viền.
Lưới 12 cột giúp bố trí ảnh và chữ song song.
Giữ vị trí tiêu đề cố định giữa các slide; nếu tiêu đề nhảy chỗ mỗi trang, người xem sẽ thấy mất tập trung.

Giao diện web

Lưới 12 cột, gutter 24px, chiều rộng nội dung tối đa khoảng 1200px.
Trên điện thoại chuyển về 4 cột, lề 16px.
Kích thước vùng chạm tối thiểu 44×44px.

Bài đăng mạng xã hội

Chừa vùng an toàn cho phần bị che (avatar, nút, chú thích).
Thiết kế cho khung xem nhỏ: kiểm tra bằng cách thu nhỏ ảnh bằng con tem, nếu vẫn đọc được tiêu đề thì đạt.

Bảng kích thước tham khảo

Loại	Kích thước	Ghi chú
Poster A3	297×420mm, 300 DPI	Chừa lề 10mm
Standee	800×2000mm	Nội dung chính đặt ở 1/3 trên
Slide	1920×1080px	Lề an toàn 5%
Ảnh bìa Facebook	1640×924px	Vùng trung tâm an toàn
Story / Reels	1080×1920px	Chừa 250px trên và dưới
Bài đăng vuông	1080×1080px	An toàn cho mọi nền tảng

Bảy lỗi bố cục thường gặp

Nhiều trục căn khác nhau trong cùng một trang.
Khoảng cách tùy hứng, không theo hệ nào.
Lấp đầy mọi chỗ trống vì sợ trang trông thiếu.
Mọi thứ đều căn giữa, dẫn tới không có nhịp điệu.
Chữ sát mép, đặc biệt nguy hiểm với bản in.
Không có điểm nghỉ: nội dung dày đặc từ đầu đến cuối.
Không kiểm tra ở kích thước thật: thiết kế nhìn ổn khi phóng to 200% trên máy, nhưng vô dụng khi in ra khổ nhỏ.

Bài tập thực hành

Bài tập khối xám: chọn 5 trang tạp chí hoặc website, vẽ lại bố cục chỉ bằng các hình chữ nhật xám. Bạn sẽ nhận ra chúng dùng rất ít cấu trúc khác nhau.
Ép lưới: lấy một poster cũ, bật lưới 6 cột và kéo mọi phần tử về đúng cột.
Kiểm tra 8pt: rà toàn bộ khoảng cách trong một thiết kế, làm tròn tất cả về bội số của 8.
Một nội dung, ba bố cục: cùng một nội dung sự kiện, dựng ba bố cục khác nhau (một cột, hai cột, module) rồi so sánh cái nào truyền đạt nhanh nhất.

Câu hỏi thường gặp

Grid có làm thiết kế bị khô cứng không?

Không, nếu bạn biết khi nào nên phá. Một phần tử cố tình tràn ra ngoài lưới sẽ tạo điểm nhấn rất mạnh — nhưng nó chỉ hiệu quả khi phần còn lại tuân thủ lưới nghiêm ngặt. Phá lưới khi chưa có lưới thì chỉ là lộn xộn.

Nên chọn bao nhiêu cột?

Web và ứng dụng: 12 cột. Ấn phẩm in: 6 hoặc 8 cột. Slide: 12 cột. Nếu nội dung đơn giản, một cột được kiểm soát tốt vẫn tốt hơn lưới phức tạp dùng sai.

Hệ 8pt có bắt buộc không?

Không bắt buộc, nhưng rất nên dùng vì màn hình phổ biến có độ phân giải chia hết cho 8, giúp giao diện sắc nét và dễ chuyển sang code. Nếu thiết kế in ấn, bạn có thể dùng hệ theo mm miễn là nhất quán.

Làm sao để biết bố cục đã cân đối?

Ba cách kiểm tra nhanh: thu nhỏ bản thiết kế bằng con tem xem có bị nghiêng lệch không; lật ngược thiết kế để nhìn thuần túy về mặt hình khối; và làm mờ toàn bộ để xem cấu trúc còn rõ không.

Grid trong Figma dùng thế nào?

Thêm Layout Grid vào frame, chọn kiểu Columns, đặt số cột và gutter, rồi bật/tắt bằng phím tắt để kiểm tra. Kết hợp với Auto Layout để khoảng cách tự tuân theo hệ 8pt. Xem chi tiết trong bài Học Figma cho người mới bắt đầu.

Nguồn tham khảo

Kết luận

Bố cục là phần ít được để ý nhất nhưng lại quyết định cảm giác chuyên nghiệp nhiều nhất. Chỉ cần hai thói quen — mọi phần tử nằm trên một trục, mọi khoảng cách là bội số của 8 — bạn đã loại bỏ được phần lớn lỗi "gần đúng" khiến thiết kế trông nghiệp dư.