Grid Layout Calculator - Tính Độ Rộng Cột, Gutter, Margin

Tính năng nổi bật

• Tính độ rộng cột theo công thức (khung trừ hai lề trừ các gutter) chia số cột, hiển thị đến 4 chữ số thập phân
• Cảnh báo cột lẻ pixel, gợi ý độ rộng khung gần nhất hoặc gutter gần nhất để cột tròn px
• Bảng độ rộng khi một khối chiếm 1 đến n cột, kèm phần trăm so với vùng nội dung
• Bảng vị trí bắt đầu, kết thúc của từng cột tính từ mép trái khung, tiện kiểm tra khi đo trong bản thiết kế
• Bộ breakpoint sửa được (mặc định Mobile 4 cột, Tablet 8 cột, Desktop 12 cột), tính độ rộng cột ở từng mốc
• Tùy chọn lưới baseline 4 px hoặc 8 px, cảnh báo khi gutter, lề không chia hết cho bước baseline
• Xem trước lưới trực quan với cột, lề, đường baseline theo đúng tỷ lệ
• Xuất CSS Grid cố định và CSS co giãn dùng repeat() với minmax(0, 1fr) theo từng breakpoint, cài đặt Layout grid Figma, gợi ý class Tailwind v3 và v4

Vì sao cần tính lưới cột trước khi thiết kế

Lưới cột là khung xương giúp mọi khối trên trang thẳng hàng với nhau: tiêu đề, ảnh, thẻ sản phẩm, biểu mẫu đều bắt đầu và kết thúc ở cùng những đường dọc. Khi thông số lưới được chọn tùy tiện, cột thường bị lẻ pixel như 61,333 px, khiến bản thiết kế đo ra số lẻ, lập trình viên phải làm tròn mỗi người một kiểu, và khi lên trình duyệt các cột chênh nhau 1 px. Tính trước giúp bạn chọn bộ số cho cột tròn, thống nhất giữa designer và lập trình viên, và có sẵn bảng độ rộng cho mọi khối chiếm 2, 3, 4 hay 6 cột. Công cụ này chỉ tập trung vào phần toán của lưới cột; nếu bạn cần sắp xếp khối vào vùng lưới một cách trực quan, CSS Grid Generator là công cụ phù hợp hơn.

Lợi ích khi sử dụng

• •Không còn cột lẻ pixel do chọn thông số tùy tiện
• •Designer và lập trình viên dùng chung một bộ số, giảm sai lệch khi dựng giao diện
• •Có sẵn độ rộng mọi khối từ 1 đến n cột, không phải bấm máy tính từng lần
• •CSS co giãn dùng fr và minmax nên lưới tự khớp mọi độ rộng màn hình giữa các breakpoint
• •Chuyển thông số sang Figma, Tailwind nhanh chóng, đúng cú pháp

Cách tính lưới cột cho layout

1. 1Nhập độ rộng khung tính cả lề hai bên, ví dụ 1440 cho màn hình máy tính hoặc 1200 cho khung nội dung cố định.
2. 2Nhập số cột (thường 12 cho máy tính), gutter là khoảng trống giữa hai cột, và lề ngoài mỗi bên của khung.
3. 3Đọc độ rộng một cột ở ô kết quả; nếu có cảnh báo lẻ pixel, cân nhắc đổi sang độ rộng khung hoặc gutter được gợi ý.
4. 4Bật lưới baseline 4 px hoặc 8 px nếu nhóm của bạn thiết kế theo hệ 8pt, công cụ sẽ báo khi gutter, lề lệch khỏi lưới.
5. 5Tra bảng độ rộng khi chiếm k cột để biết kích thước chính xác của từng khối, và bảng vị trí để đối chiếu khi đo trong Figma.
6. 6Chỉnh bộ breakpoint cho điện thoại, máy tính bảng, máy tính, rồi sao chép CSS co giãn, cài đặt Figma hoặc gợi ý Tailwind.

Công thức tính độ rộng cột

Vùng nội dung bằng độ rộng khung trừ lề ngoài hai bên. Trong vùng đó có n cột và n trừ 1 gutter, nên độ rộng một cột bằng vùng nội dung trừ (n trừ 1) nhân gutter, tất cả chia cho n. Ví dụ khung 1200 px, 12 cột, gutter 24 px, không lề: vùng nội dung 1200 px, 11 gutter chiếm 264 px, còn 936 px chia 12 cột được đúng 78 px mỗi cột. Một khối chiếm k cột rộng bằng k cột cộng k trừ 1 gutter nằm bên trong nó: chiếm 6 cột là 6 nhân 78 cộng 5 nhân 24, bằng 588 px, đúng bằng nửa vùng nội dung trừ nửa gutter. Với khung 1440 px, lề 120 px mỗi bên, 12 cột, gutter 24 px, vùng nội dung 1200 px và cột vẫn là 78 px. Chiếm cả 12 cột thì bằng đúng vùng nội dung, công cụ dùng điều này để tự kiểm tra kết quả.

Cột lẻ pixel và cách chọn số tròn

Khi phép chia không tròn, ví dụ khung 1000 px, 12 cột, gutter 24 px cho cột 61,333 px, trình duyệt vẫn hiển thị được nhưng phải làm tròn vị trí khi vẽ lên điểm ảnh thật, nên có cột rộng 61 px, có cột 62 px, và đường viền có thể bị nhòe. Trong Figma, số lẻ khiến việc đo và căn chỉnh mất thời gian. Công cụ tìm hai hướng sửa: đổi độ rộng khung sang giá trị gần nhất cho cột tròn, với ví dụ trên là 996 px (cột 61 px) hoặc 1008 px (cột 62 px), hoặc giữ khung và đổi gutter, với ví dụ trên là 20 px (cột 65 px) hoặc 32 px (cột 54 px). Khi bật lưới baseline, gợi ý gutter chỉ lấy bội số của 4 để vẫn khớp hệ khoảng cách. Với lưới co giãn theo phần trăm màn hình, cột lẻ là điều bình thường và không cần sửa.

Bộ breakpoint 4, 8, 12 cột

Nhiều design system chia lưới 4 cột cho điện thoại, 8 cột cho máy tính bảng và 12 cột cho máy tính, vì 4, 8, 12 đều chia hết cho 2 và 4, giúp một khối nửa trang hay một phần tư trang luôn nằm gọn trên số cột nguyên. Bộ mặc định của công cụ là Mobile từ 0 px với 4 cột, gutter và lề 16 px; Tablet từ 768 px với 8 cột, gutter 24 px, lề 32 px; Desktop từ 1200 px với khung tối đa 1200 px, 12 cột, gutter và lề 24 px. Đây chỉ là điểm xuất phát thường gặp, không phải tiêu chuẩn bắt buộc; hãy sửa theo thiết bị thực tế của người dùng sản phẩm. Cột cuối bảng cho biết độ rộng cột tại độ rộng mẫu của từng mốc, ví dụ điện thoại 360 px cho cột 70 px, để bạn hình dung khối nhỏ nhất trông ra sao.

CSS Grid cố định và CSS Grid co giãn

Bản CSS cố định đặt đúng độ rộng khung và độ rộng cột bằng px, hợp với khung nội dung không đổi kích thước hoặc để đối chiếu với bản thiết kế. Bản co giãn dùng grid-template-columns: repeat(n, minmax(0, 1fr)): mỗi cột nhận một phần bằng nhau của khoảng còn lại sau khi trừ gutter, nên lưới tự khớp mọi độ rộng màn hình. Dùng minmax(0, 1fr) thay vì 1fr trần vì 1fr có giới hạn dưới là độ rộng tối thiểu của nội dung, một chữ dài hay ảnh lớn có thể đẩy cột phình ra và phá lưới. Lề ngoài được viết thành padding-inline của khung với box-sizing: border-box, nên độ rộng khung tối đa đã gồm lề, khớp với cách nhập ở công cụ. Các class span-k dùng grid-column: span k để một khối chiếm k cột.

Lưới baseline và hệ 8pt

Hệ 8pt quy ước mọi khoảng cách, kích thước đều là bội số của 8 (hoặc 4 cho chi tiết nhỏ), giúp nhịp điệu theo chiều dọc đều đặn và dễ trao đổi giữa các thành viên. Lưới baseline là các đường ngang cách đều nhau theo bước đó, dòng chữ và cạnh khối được căn theo các đường này. Khi bật tùy chọn, công cụ vẽ đường baseline trong phần xem trước, thêm lưới Grid với kích thước tương ứng vào cài đặt Figma, và cảnh báo nếu gutter hay lề không chia hết cho bước đã chọn. Lưu ý độ rộng cột không cần là bội số của 8, vì nó là kết quả của phép chia; điều quan trọng là gutter, lề và khoảng cách dọc theo đúng hệ.

Chuyển thông số sang Figma và Tailwind

Trong Figma, chọn frame, thêm Layout grid, đổi kiểu sang Columns và nhập Count, Margin, Gutter với Type là Stretch để lưới co giãn theo frame. Nếu muốn cột có độ rộng cố định nằm giữa frame, dùng Type Center với Width bằng độ rộng cột công cụ đã tính. Lưới baseline là một Layout grid thứ hai kiểu Grid với Size bằng bước baseline. Với Tailwind, công cụ đưa ra hai gợi ý riêng cho bản 3 và bản 4, giả định cỡ chữ gốc 16 px và thang spacing mặc định: bản 4 chấp nhận grid-cols với số cột bất kỳ và giá trị spacing theo bội số của nửa đơn vị, còn bản 3 mặc định chỉ có grid-cols tới 12 và một số nấc spacing nhất định, giá trị ngoài thang được viết dạng giá trị tùy ý trong ngoặc vuông để vẫn đúng.

Giới hạn cần biết

Công cụ tính lưới cột đều nhau, không hỗ trợ lưới cột không đều như cột bên hẹp hơn cột chính, và không đặt vùng lưới theo tên. Gợi ý khung và gutter tròn px chỉ áp dụng khi các thông số nhập vào là số nguyên. Độ rộng cột trong bảng breakpoint tính tại một độ rộng mẫu; giữa hai mốc breakpoint, cột co giãn liên tục theo màn hình. Phần xem trước là hình minh họa tỷ lệ, không thay thế cho việc kiểm tra trên trình duyệt thật. Gợi ý Tailwind có thể không đúng nếu dự án đã tùy chỉnh thang spacing hoặc cỡ chữ gốc.

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

Từ khóa liên quan

• grid layout calculator
• tính độ rộng cột
• column grid calculator
• tính gutter margin
• lưới 12 cột
• grid system calculator
• layout grid figma
• css grid 12 cột
• responsive grid breakpoint
• 8pt grid
• baseline grid
• tính lưới thiết kế web
• độ rộng container
• css grid minmax 1fr
• tailwind grid cols
• column width calculator
• lưới cột responsive
• thiết kế lưới layout
• grid 4 8 12 cột