Công cụ tạo CSS Grid Layout
Thiết kế bố cục CSS Grid với trình chỉnh sửa trực quan. Thiết lập các cột và hàng bằng cách sử dụng các đơn vị fr, px hoặc auto, định cấu hình khoảng cách, trải ô và xuất CSS sạch.
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
CSS Grid Builder là gì?
CSS Grid builder là một công cụ trực quan để thiết kế bố cục hai chiều bằng CSS Grid. Bạn xác định các cột, hàng và khoảng cách, sau đó nhấp vào các ô để đặt giá trị khoảng trải. Công cụ này tạo ra mã CSS tương ứng mà bạn có thể sao chép vào dự án của mình. Nó loại bỏ sự cần thiết phải ghi nhớ cú pháp Grid trong khi học hoặc tạo mẫu bố cục.
Cách xây dựng bố cục CSS Grid
- Xác định các cột — Nhập định nghĩa cột bằng cách sử dụng fr, px hoặc auto (ví dụ:
1fr 1fr 1fr) - Xác định các hàng — Nhập định nghĩa hàng theo cùng một cách
- Đặt khoảng cách — Điều chỉnh các giá trị khoảng cách cột và hàng tính bằng pixel
- Nhấp vào Áp dụng — Lưới xem trước cập nhật để hiển thị bố cục của bạn
- Trải ô — Nhấp vào bất kỳ ô nào và đặt giá trị khoảng trải cột/hàng
- Sao chép CSS — Nhấp vào nút sao chép để lấy mã được tạo
Tại sao nên sử dụng CSS Grid Builder này?
- Phản hồi trực quan — Xem bố cục lưới của bạn cập nhật trong thời gian thực
- Đơn vị linh hoạt — Sử dụng fr, px, auto hoặc bất kỳ độ dài CSS hợp lệ nào cho các cột và hàng
- Khoảng trải ô — Nhấp vào các ô để trải trên nhiều cột hoặc hàng
- CSS sạch — Mã được tạo sử dụng các thuộc tính Grid tiêu chuẩn sẵn sàng cho sản xuất
- Không cần tài khoản — Miễn phí và hoạt động hoàn toàn trong trình duyệt của bạn
So sánh FreeToolbox với các trình tạo Grid khác
| Tính năng | FreeToolbox | CSS Grid Generator | Layoutit |
|---|---|---|---|
| Khoảng trải ô | Có | Có | Có |
| Đơn vị tùy chỉnh | fr, px, auto | fr, px | fr, px, % |
| Xem trước trực tiếp | Có | Có | Có |
| Quảng cáo | Tối thiểu | Không có | Vừa phải |
| Chủ đề tối | Có | Không | Không |
Câu hỏi thường gặp
Tôi có thể sử dụng đơn vị nào cho các cột và hàng?
Bạn có thể sử dụng bất kỳ giá trị track CSS grid hợp lệ nào: fr (đơn vị phân số), px (pixel), auto, phần trăm, minmax(), v.v. Ví dụ: 1fr 200px auto.
Làm cách nào để làm cho một ô trải dài trên nhiều cột?
Nhấp vào một ô trong bản xem trước để chọn nó, sau đó đặt giá trị Khoảng trải cột trong bảng điều khiển bên dưới. Nhấp vào 'Đặt khoảng trải' để áp dụng.
Tôi có thể tạo các vùng lưới được đặt tên không?
Công cụ này tập trung vào định nghĩa Grid dựa trên track với cú pháp khoảng trải. Đối với các vùng grid-template-areas được đặt tên, bạn sẽ cần thêm chúng theo cách thủ công vào CSS đã tạo.
Điều gì xảy ra khi khoảng trải chồng lên nhau?
Thuật toán tự động đặt vị trí lưới của trình duyệt sẽ xử lý các khoảng trải chồng chéo. Một số ô có thể thay đổi vị trí. Đặt lại khoảng trải nếu bố cục trông không như mong đợi.
Công cụ này có miễn phí không?
Có, hoàn toàn miễn phí, không giới hạn hoặc yêu cầu đăng ký.