Trình Tạo CSS Grid

Trình Tạo CSS Grid Là Gì?

Trình Tạo CSS Grid là một công cụ trực quan giúp bạn tạo bố cục CSS Grid mà không cần viết mã từ đầu. Thay vì nhập thủ công các thuộc tính grid, bạn thiết kế bố cục của mình bằng cách tương tác với một canvas lưới trực quan.

Công cụ cung cấp một bộ điều khiển grid hoàn chỉnh — cột, hàng, khoảng cách, căn chỉnh và các vùng mẫu — tất cả ở một nơi. Khi bạn thực hiện thay đổi, mã CSS và HTML tương ứng sẽ cập nhật theo thời gian thực, sẵn sàng để sao chép vào dự án của bạn.

Công Cụ Này Dành Cho Ai?

Các Khả Năng Chính

Trình tạo bao gồm các tính năng CSS Grid được sử dụng phổ biến nhất:

Cách Sử Dụng Trình Tạo CSS Grid

Các Tính Năng

Canvas Lưới Trực Quan

Bản xem trước tương tác hiển thị bố cục lưới của bạn theo thời gian thực. Mỗi ô đều có thể nhấp và kéo — chọn một vùng và vẽ các ô để xác định các vùng lưới được đặt tên. Canvas phản ánh chiều rộng cột, chiều cao hàng và cài đặt khoảng cách chính xác của bạn.

Bố Cục Cài Đặt Sẵn

Bắt đầu nhanh chóng với năm cài đặt sẵn bố cục tích hợp:

Giá Trị Track Linh Hoạt

Mỗi track cột và hàng chấp nhận bất kỳ giá trị CSS grid hợp lệ nào. Sử dụng các đơn vị fr để điều chỉnh kích thước linh hoạt, px cho chiều rộng cố định, auto để điều chỉnh kích thước dựa trên nội dung, hoặc các giá trị nâng cao như minmax(200px, 1fr).

/* Flexible units */
grid-template-columns: 1fr 2fr 1fr;

/* Fixed widths */
grid-template-columns: 200px 400px 200px;

/* Mixed values */
grid-template-columns: 250px 1fr auto;

/* Advanced sizing */
grid-template-columns: minmax(200px, 1fr) 2fr minmax(150px, 300px);

Các Vùng Mẫu

Tạo các vùng lưới được đặt tên bằng cách vẽ các ô trên canvas. Thêm, xóa và chọn các vùng từ danh sách vùng. Công cụ tạo CSS grid-template-areas thích hợp với các bộ chọn lớp vùng tương ứng.

Điều Khiển Khoảng Cách và Căn Chỉnh

Đặt khoảng cách hàng và cột một cách độc lập tính bằng pixel. Cấu hình tất cả bốn thuộc tính căn chỉnh — justify-items, align-items, justify-content, và align-content — với các nhóm nút trực quan.

Đầu Ra Mã Sạch Sẽ

Trình tạo tạo ra CSS sẵn sàng sử dụng với một lớp .grid-container và các lớp vùng riêng lẻ. Chuyển đổi sang tab HTML để có cấu trúc đánh dấu phù hợp. Sao chép bất kỳ đầu ra nào bằng một cú nhấp chuột.

• Cú pháp CSS Grid tuân thủ tiêu chuẩn
• Đặt tên lớp ngữ nghĩa
• Mã tối thiểu, được tối ưu hóa
• Sẵn sàng để sử dụng trong sản xuất

Chế Độ Tối

Công cụ hỗ trợ đầy đủ chế độ tối, tự động điều chỉnh tất cả các màu, đường viền và khối mã đầu ra cho việc sử dụng thoải mái trong bất kỳ điều kiện ánh sáng nào.

Các Câu Hỏi Thường Gặp