ListFan
Lưu trữ · 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.

Công cụ này đã được lưu trữ. Kiểm tra lại phương pháp và dữ liệu ghi ngày trước khi dùng.

01Nhập giá trị

Chạy trong trình duyệt

Chạy ngoại tuyến trong trình duyệt. Sau khi trang và các tệp cần thiết đã tải, việc xử lý không cần Internet.

Ví dụ
px

02Tạo CSS Grid

|

Chạy trong trình duyệt

Cách hoạt động

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 ở lại với bạn

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 bản xem trước lưới và CSS từ số cột, hàng và khoảng cách.

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

Dùng công cụ ↑
Cách sử dụng
  1. Nhập giá trị
    • Cột
    • Hàng
    • Khoảng cách
  2. Phương pháp tính

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

  3. 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;

Phương pháp tính

  1. 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ụ

Tạo CSS Grid

Cột
3
Hàng
2
Khoảng cách
16 px
Kết quả
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

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

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ủ.

Thuật ngữ và định nghĩa

Nhập giá trị

Cột

Nhập số nguyên, không dùng số lẻ cho số lượng.

Tối thiểu: 1 · Tối đa: 12

Hàng

Nhập số nguyên, không dùng số lẻ cho số lượng.

Tối thiểu: 1 · Tối đa: 12

Khoảng cách

Nhập giá trị số của đại lượng này. Dùng đơn vị hiển thị cạnh ô. px

Tối thiểu: 0 · Tối đa: 100 px

Kết quả

Kết quả

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

Tính từ dữ liệu nhập theo phương pháp bên dưới.

Lỗi thường gặp và cách sửa

Tạo CSS Grid

Lỗi: Dùng kết quả ngoài phạm vi đã mô tả.

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

Giới hạn và giả định chính

  • Tạo CSS Grid có cột bằng nhau rồi tùy chỉnh mã cho trang của bạn.
  • Kết quả có thể được làm tròn; điều này không tăng độ chính xác đo.

Công cụ khác

Tất cả công cụ