Đã dùng gần đây

    Mở một công cụ và nó sẽ xuất hiện ở đây.

    Tạo CSS Grid

    Công cụ tạo bố cục CSS Grid trực quan kèm tạo mã

    Chia sẻ công cụ này

    Báo cáo sự cố

    Hãy mô tả sự cố mà không kèm dữ liệu nhập hoặc tệp riêng tư.

    Công cụ này hữu ích đến mức nào?

    Công cụ này hữu ích đến mức nào?

    Cài đặt bố cục

    Bố cục có sẵn

    Vị trí theo từng phần tử

    Chọn một phần tử trong bản xem trước hoặc danh sách để chỉnh thuộc tính của nó.

    Tra cứu nhanh CSS Grid

    Track lưới

    Dùng đơn vị fr cho track linh hoạt, px/% cho track cố định và auto cho track theo kích thước nội dung.

    Hàm repeat()

    repeat(3, 1fr) là cách viết tắt của 1fr 1fr 1fr. Dùng auto-fill hoặc auto-fit cho lưới đáp ứng.

    Phần tử trải nhiều ô

    Dùng span N để trải N track, hoặc 1 / -1 để trải toàn bộ cột/hàng.

    Xem trước trực tiếp

    CSS được tạo

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

    Đổi cài đặt hoặc chọn một phần tử. Bản xem trước và CSS cập nhật cùng lúc.

    Giới thiệu về công cụ Tạo CSS Grid

    Công cụ Tạo CSS Grid là công cụ trực quan, tương tác để thiết kế và tạo bố cục CSS Grid. CSS Grid Layout là hệ thống bố cục hai chiều mạnh mẽ nhất hiện có trong CSS, cho phép bạn xác định đồng thời cả cột lẫn hàng. Công cụ này mang đến cách tiếp cận thực hành để học, thử nghiệm và tạo mã CSS Grid sẵn sàng cho sản phẩm.

    Thiết kế

    Mới thêm gần đây

    Tất cả công cụ

    Cài đặt quyền riêng tư

    Chọn tùy chọn của bạn cho phân tích, quảng cáo và cá nhân hóa. Bộ nhớ thiết yếu giúp các tính năng như giao diện và công cụ đã lưu tiếp tục hoạt động.

    Bộ nhớ thiết yếu luôn được bật.