Layout grid trong Figma: lưới 12 cột cho web, 4 cột cho mobile

Cách dùng layout grid (layout guide) trong Figma: thêm lưới 12 cột cho web 1440 px, 4 cột cho mobile 360 px, ý nghĩa Stretch, Margin, Gutter và cách tính độ rộng cột bằng công cụ miễn phí của ColorME.

Layout grid trong Figma (từ tháng 5/2025 Figma đổi tên thành Layout guide) là hệ cột, hàng phủ lên Frame để bạn căn mọi phần tử thẳng hàng. Mức hay dùng: lưới 12 cột cho web desktop, 4 cột cho mobile. Bài này hướng dẫn thêm lưới cột trong Figma theo trang trợ giúp chính thức, và tính sẵn số liệu bằng công cụ Tính lưới cột của ColorME.

Hai bộ thông số trên là mẫu Desktop 1440 và Mobile 360 có sẵn trong công cụ Tính lưới cột (đọc ngày 18/10/2026); độ rộng cột là kết quả công cụ tính ra.

Layout guide trong Figma có mấy kiểu?

Theo trang trợ giúp "Create layout guides" của Figma (đọc ngày 18/10/2026), tính năng "layout grid" được đổi tên thành "layout guide" từ tháng 5/2025, và khác với tuỳ chọn grid trong auto layout. Có ba kiểu:

• Uniform grid: lưới ô vuông, hợp khi cần độ chính xác như vẽ biểu tượng, icon. Mặc định mỗi ô 10 x 10 px.
• Column: các cột dọc chạy hết chiều cao Frame, dùng cho bố cục web và app.
• Row: các hàng ngang chạy hết chiều rộng Frame.

Màu mặc định của layout guide là đỏ #FF0000 với độ mờ 10%, bạn đổi được màu và độ mờ.

Cách thêm lưới 12 cột cho Frame trong Figma

1. Chọn một Frame (component cũng là Frame nên cũng thêm được).
2. Ở thanh bên phải, mục Layout guide, bấm Add layout guide. Figma thêm một uniform grid mặc định.
3. Bấm biểu tượng cài đặt của layout guide để đổi sang kiểu Columns.
4. Nhập Count (số cột), chọn Type, rồi nhập Margin và Gutter.

Về Type, Figma giải thích: kiểu Stretch cho cột tự giãn khi Frame đổi kích thước, ô Width bị khoá và hiện Auto, và chỉ kiểu Stretch mới có Margin. Các kiểu Left, Center, Right là kiểu "cố định": bạn nhập Width của mỗi cột và Offset (khoảng cách bắt đầu tính từ mép Frame).

Lưới 12 cột cho Frame 1440 px: gutter 24 px, lề 120 px, mỗi cột 78 px, kèm bảng độ rộng khi gộp cột. Ảnh chụp màn hình thật, công cụ Tính lưới cột, 18/10/2026.

Với Frame 1440 px, công cụ Tính lưới cột cho kết quả: 12 cột, gutter 24 px, lề 120 px mỗi bên thì vùng nội dung là 1200 px và mỗi cột rộng 78 px.

Lưới 4 cột cho mobile

Lưới 4 cột cho Frame 360 px: gutter 16 px, lề 16 px, mỗi cột 70 px. Ảnh chụp màn hình thật, 18/10/2026.

Theo trang công cụ, lưới cho điện thoại phổ biến là 4 cột với gutter 16 px và lề từ 16 đến 20 px; tablet thường dùng 8 cột, desktop 12 cột. Với Frame 360 px, lề 16 px và gutter 16 px, mỗi cột rộng 70 px, vùng nội dung 328 px.

Nhập thông số từ công cụ vào Figma

Thông số nhập vào Layout guide kiểu Columns trong Figma cho desktop và mobile, đọc từ công cụ Tính lưới cột.

Công cụ Tính lưới cột có sẵn phần dành cho Figma với đúng các ô Type, Count, Margin, Gutter, Width như trong bảng Layout guide. Trang công cụ hướng dẫn: "Chọn Frame trong Figma, thêm Layout guide kiểu Columns (trước tháng 5/2025 Figma gọi là Layout grid), rồi nhập số cột, Gutter và Margin theo phần Figma · Layout guide của công cụ." Về chi phí: "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt."

Vì sao lưới 12 cột tiện?

Trang công cụ giải thích: "12 chia hết cho 2, 3, 4 và 6 nên dễ chia bố cục 2, 3, 4 hay 6 phần đều nhau, linh hoạt cho cả desktop và tablet." Khi dàn trang, bạn chỉ cần đếm cột:

Bố cục mẫu trên lưới 12 cột: thanh menu 12 cột, ảnh 8 cột, khối chữ 4 cột, ba thẻ mỗi thẻ 4 cột. Số liệu tính bằng máy.

• Độ rộng một khối = số cột x 78 px + số khoảng cách x 24 px. Ví dụ khối 4 cột rộng 4 x 78 + 3 x 24 = 384 px; khối 8 cột rộng 792 px; cả 12 cột là 1200 px.
• Ba thẻ bằng nhau: mỗi thẻ 4 cột. Ảnh lớn và khối chữ: 8 + 4 cột.
• Nội dung đặt trong cột, không đặt vào gutter. Trang công cụ ghi: "Gutter là khoảng trống giữa các cột, margin là lề hai bên khung."

Muốn hiểu lý thuyết lưới trong thiết kế đồ hoạ nói chung, xem bài grid là gì. Nếu đang làm khung giao diện, công cụ Vẽ wireframe và bài 4 bước thiết kế wireframe sẽ hữu ích.

Mẹo dùng layout guide

• Ẩn hiện nhanh: theo trang trợ giúp của Figma, nhấn Shift G để bật tắt tất cả layout guide trong file; lưới vẫn hoạt động khi bị ẩn.
• Kết hợp nhiều lưới: một Frame có thể có cả Columns và Rows để căn cả chiều dọc lẫn chiều ngang.
• Lưu thành style: chọn Frame có lưới, bấm Apply styles trong mục Layout guide, chọn Create style để dùng lại cho các màn hình khác.
• Cột số nguyên: nếu cột ra số lẻ, chỉnh lề hoặc gutter một chút để cột tròn số, thiết kế sắc nét hơn.

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

Layout grid trong Figma đổi tên thành gì?

Từ tháng 5/2025, Figma đổi tên layout grid thành layout guide. Đây là tính năng khác với tuỳ chọn grid trong auto layout.

Lưới 12 cột cho web desktop dùng thông số nào?

Một mẫu phổ biến là Frame 1440 px, 12 cột, gutter 24 px, lề 120 px; mỗi cột rộng 78 px và vùng nội dung 1200 px.

Lưới cho mobile nên mấy cột?

Phổ biến là 4 cột với gutter 16 px và lề 16 đến 20 px. Với Frame 360 px, lề 16 px, mỗi cột rộng 70 px.

Stretch và Left, Center, Right khác nhau thế nào?

Stretch cho cột tự giãn theo Frame, có Margin và Width tự động. Left, Center, Right là kiểu cố định: bạn nhập độ rộng mỗi cột và Offset.

Làm sao tính độ rộng khi gộp nhiều cột?

Lấy số cột nhân độ rộng một cột, cộng với số khoảng cách nhân gutter. Ví dụ 4 cột của lưới 78 px, gutter 24 px rộng 384 px.