Công Cụ Tạo CSS Grid - Từng Bước
Công cụ tạo CSS Grid tạo ra một đoạn CSS display: grid sẵn sàng để dán chỉ trong ba bước: đặt số cột và số hàng, đặt khoảng cách, rồi sao chép kết quả. Không có gì được tải lên và không cần cài đặt.
Bước 1 - đặt số cột và số hàng
Mở Công cụ tạo CSS Grid. Kéo thanh trượt Columns (1 đến 12) và thanh trượt Rows (1 đến 6) để khớp với bố cục bạn muốn - lưới xem trước bên phải vẽ lại các ô ngay lập tức.
Bước 2 - đặt khoảng cách
Kéo thanh trượt Column gap và Row gap (0px đến 50px mỗi loại) để điều chỉnh khoảng cách giữa các ô. Lưới xem trước và đoạn CSS được tạo ra bên dưới cập nhật theo thời gian thực với giá trị pixel chính xác.
Bước 3 - sao chép kết quả
Nhấp "Copy CSS" để sao chép đoạn mã vào bộ nhớ tạm. Nếu trình duyệt chặn quyền truy cập bộ nhớ tạm, một thông báo trạng thái sẽ yêu cầu bạn chọn và sao chép văn bản theo cách thủ công. Toàn bộ trang chạy trên trình duyệt, vì vậy không có giá trị thanh trượt nào được gửi đến máy chủ.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.