Tính lưới cột
Nhập khung, số cột, gutter và lề, nhận ngay độ rộng cột, CSS Grid và Figma.
Khung mẫu
Mỗi cột rộng
Độ rộng khi gộp cột
Rê chuột để xem trên trang, bấm để chép số.
CSS Grid
Figma · Layout guide
Xem nhanh cách dùng
Câu hỏi thường gặp
Cách tính lưới cột cho thiết kế web?
Nhập chiều rộng khung, số cột, khoảng cách cột (gutter) và lề hai bên, công cụ tính ngay độ rộng mỗi cột và độ rộng khi gộp nhiều cột.
Vì sao nên dùng lưới 12 cột?
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.
Gutter và margin khác nhau thế nào?
Gutter là khoảng trống giữa các cột, margin là lề hai bên khung. Nội dung đặt trong cột, không đặt vào gutter.
Có mẫu lưới cho từng thiết bị không?
Có sẵn mẫu Desktop 1440, Laptop 1280, Tablet 768 và Mobile 360, bấm là điền ngay thông số phổ biến để bạn chỉnh tiếp.
Độ rộng cột ra số thập phân có sao không?
Vẫn dùng được, nhưng cột số nguyên giúp thiết kế sắc nét và dễ canh hơn. Hãy chỉnh lề hoặc gutter một chút để có số tròn.
Bảng "Độ rộng khi gộp cột" dùng để làm gì?
Bảng cho biết một khối chiếm 2, 3... đến 12 cột thì rộng bao nhiêu pixel, tiện khi đặt kích thước ảnh, card hay khung chữ.
Làm sao đưa lưới vào Figma?
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ụ.
Có xuất được mã CSS Grid không?
Có, bấm Sao chép CSS để lấy đoạn CSS Grid với số cột, gutter và lề đúng như bạn đã chọn.
Lưới cho điện thoại nên mấy cột?
Phổ biến là 4 cột với gutter 16px và lề 16–20px. Tablet thường dùng 8 cột, desktop 12 cột.
Lưới có dùng cho thiết kế in ấn được không?
Được, nguyên tắc chia cột giống nhau. Hãy quy đổi kích thước giấy sang pixel ở độ phân giải bạn dùng, hoặc dùng công cụ Tính DPI & cỡ in của ColorME.
Công cụ tính lưới có miễn phí không?
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.
Có xem trước lưới được không?
Có, phần Xem trước vẽ các cột và gutter theo tỉ lệ để bạn hình dung bố cục trước khi mở phần mềm thiết kế.
Công cụ cùng nhóm
Tất cả công cụ
Hút màu ở bất kỳ đâu, ra HEX, RGB, HSL, CMYKLấy màu trên màn hình
HEX, RGB, HSL, CMYK, OKLCH qua lạiĐổi mã màu
Chữ trên nền có đạt chuẩn WCAG khôngKiểm tra tương phản
Dải màu tuyến tính, toả tròn, xuất CSSTạo gradient CSS
Lấy dải màu gradient từ chính bức ảnhTạo gradient từ ảnh
Tạo dải 50–950 từ 1 màu, xuất CSS, TailwindThang màu & design token
Xem thiết kế qua mắt người mù màuMô phỏng mù màu