Trình Tạo Lưới CSS miễn phí
Thiết kế trực quan một lưới CSS — các track, đơn vị và khoảng cách — và sao chép CSS và HTML được tạo.
Thiết kế lưới CSS trực quan: thêm cột và hàng, kết hợp các đơn vị fr/px/auto/min-content, điều chỉnh khoảng cách, và xem trước trực tiếp. Sao chép CSS sẵn sàng cho production và HTML tương ứng.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🔒 Mọi thứ chạy trong trình duyệt của bạn — không có gì được tải lên.
Cách hoạt động
Thiết kế CSS grid trực quan: thêm tối đa 8 cột và 8 hàng, đặt mỗi track là fr, px, auto hoặc min/max-content, và điều chỉnh khoảng cách hàng/cột. Bản xem trước trực tiếp có đánh số cập nhật ngay, và CSS grid-template được tạo cùng HTML tương ứng chỉ cách bộ nhớ tạm một cú nhấp.
- 1Định hình lướiThêm/xóa cột và hàng bằng + và −.
- 2Đặt các trackMỗi cột và hàng có đơn vị riêng (1fr, 100px, auto…).
- 3Tinh chỉnh khoảng cáchThanh trượt row-gap và column-gap riêng biệt.
- 4Sao chép mãCSS sẵn sàng dùng thực tế và khung HTML tương ứng.
Mọi thứ chạy trong trình duyệt — không có gì được tải lên.
Công cụ liên quan
Trình Tạo CSS Flexbox
Thử nghiệm hướng flex, xuống dòng, căn chỉnh trên các mục trực tiếp — và sao chép CSS.
Tạo CSS clamp()
Tạo giá trị CSS clamp() linh hoạt cho typography và khoảng cách responsive. Đặt kích thước min/max và phạm vi viewport, xem trước trực tiếp và sao chép CSS một dòng.
Giấy in sẵn — Giấy kẻ dòng, kẻ ô, chấm lưới và giấy nhạc (PDF)
In giấy theo ý bạn: kẻ dòng (dòng rộng hoặc dòng đại học), kẻ ô, chấm lưới, đẳng cự, luyện viết tay, khuông nhạc hoặc ghi chú Cornell, cỡ A4, Letter, A5 hoặc Legal, màu nét tùy chọn, bao nhiêu trang tùy ý. Tệp PDF vector sắc nét tạo ngay trong trình duyệt.