Tạo khoảng cách fluid

Sinh bộ khoảng cách từ nhỏ đến lớn bằng clamp(), tự co giãn giữa điện thoại và máy tính. Chép biến CSS dùng cho padding, gap.

Cách dùng

Nhập độ rộng màn nhỏ nhất và lớn nhất mà web cần đẹp.
Nhập khoảng cách gốc ở hai đầu. Công cụ sinh bộ bậc từ 3XS đến 3XL và cả cặp chuyển bậc như S-L.
Chép mã biến CSS, dùng như padding: var(--space-m) hoặc gap: var(--space-s-l).

Sao khoảng cách cũng cần co giãn?

Khoảng trống hợp với máy tính thường quá rộng trên điện thoại. Khoảng cách fluid tự thu lại ở màn nhỏ nên trang không bị loãng hay chật.

Cặp chuyển bậc như S-L dùng khi nào?

Khi cần khoảng trống đổi nhiều hơn bình thường, ví dụ đệm trên dưới của mỗi mục: nhỏ ở điện thoại, rộng hẳn ở máy tính.

Có nên dùng chung với cỡ chữ fluid không?

Nên. Đặt cùng độ rộng màn nhỏ nhất và lớn nhất cho cả hai bộ thì chữ và khoảng trống co giãn cùng nhịp.