Gutter là gì?
Còn gọi: khoảng cách giữa các cột
Gutter là khoảng trống cố định giữa các cột hoặc hàng trong hệ thống lưới, giúp nội dung trong các cột cạnh nhau không dính vào nhau và tạo nhịp đều cho bố cục.
Hiểu kỹ hơn
Một lưới cột gồm ba thông số: số cột, độ rộng gutter và lề ngoài (margin). Giá trị phổ biến trong thiết kế giao diện là gutter 16px trên điện thoại và 24 hoặc 32px trên máy tính, nên là bội số của 4 hoặc 8 để khớp hệ thống khoảng cách. Bootstrap 5 dùng gutter mặc định 1,5rem tức 24px. Trong Figma, gutter đặt ở ô Gutter của layout grid; khi dựng bằng auto layout, gap giữa các card nên bằng đúng gutter để thiết kế khớp với lưới. Trong in ấn, gutter còn chỉ khoảng trống ở gáy sách giữa hai trang đối diện, nên khi trao đổi cần rõ ngữ cảnh. Ví dụ: lưới 12 cột rộng 1200px với gutter 24px cho mỗi cột rộng 78px. Lỗi thường gặp là để gutter lệch với khoảng cách giữa các card thật, khiến nội dung không bám lưới, hoặc gutter quá nhỏ trên máy tính làm các khối trông chen chúc.
