Thiết kế · Miễn phí

Tạo CSS Grid

Tạo bản xem trước lưới và CSS từ số cột, hàng và khoảng cách.

01Nhập giá trị

Chạy trong trình duyệt

—

Chạy trong trình duyệt

Tạo bản xem trước lưới và CSS từ số cột, hàng và khoảng cách.

Chạy trong trình duyệt

Dữ liệu được xử lý trên trang này và không gửi đến máy chủ.

Về công cụ này

Tạo CSS Grid có cột bằng nhau rồi tùy chỉnh mã cho trang của bạn.

Nhập giá trị
Cột · Hàng · Khoảng cách
Tính / tạo
Tạo bản xem trước lưới và CSS từ số cột, hàng và khoảng cách.
Kết quả
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Tạo CSS Grid có cột bằng nhau rồi tùy chỉnh mã cho trang của bạn.

Ví dụ

Kết quả

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Nên hiểu kết quả thế nào?

Tạo CSS Grid có cột bằng nhau rồi tùy chỉnh mã cho trang của bạn.

Dữ liệu của tôi đi đâu?

Tính toán chạy trên thiết bị của bạn. Dữ liệu không gửi đến máy chủ.