Trình tạo CSS Grid

Chào mừng bạn đến với CSS Grid Generator — một trình xây dựng trực quan tương tác miễn phí, giúp chuyển đổi các cú nhấp chuột thành mã CSS Grid sạch sẽ, sẵn sàng để sao chép. Cho dù bạn đang phác thảo bố cục Holy Grail, tạo nguyên mẫu thư viện ảnh hay tìm hiểu cách grid-template-columns và grid-area hoạt động, công cụ này cung cấp cho bạn bản xem trước trực tiếp, các điều khiển kích thước theo từng track và xuất mã chỉ với một cú nhấp chuột — không cần thiết lập, không cần đăng ký, không có phụ trợ.

CSS Grid Generator là gì?

Công cụ này là một sân chơi bố cục hai chiều. Bạn xác định hàng và cột, nhấp vào các ô để đặt mục, kéo dài nhịp qua nhiều track và xem mã CSS được tạo cập nhật theo thời gian thực. Không giống như hầu hết các trình tạo lưới chỉ tạo ra grid-template-columns, trình tạo này hỗ trợ đặt mục riêng lẻ (grid-row / grid-column), trải rộng nhiều ô, đánh số dòng lưới hoạt hình cho người mới học và sáu cài đặt sẵn đã qua kiểm chứng mà bạn có thể tải ngay lập tức.

Điều gì làm cho trình tạo này khác biệt

Đơn vị fr có nghĩa là gì trong CSS Grid?

Đơn vị fr có nghĩa là một phần của không gian trống có sẵn trong vùng chứa lưới. Sau khi trừ đi các kích thước cố định (px, em, %), không gian còn lại được chia theo tỷ lệ giữa các track fr. Ví dụ: 1fr 2fr 1fr cung cấp cho cột ở giữa lượng không gian trống gấp đôi so với các cột khác. fr là cách phổ biến nhất để xây dựng bố cục linh hoạt, tỷ lệ thuận, đáp ứng kích thước vùng chứa mà không cần truy vấn phương tiện.

CSS Grid khác với Flexbox như thế nào?

Flexbox là một chiều và sắp xếp các mục dọc theo một trục duy nhất (hàng hoặc cột). CSS Grid là hai chiều và kiểm soát hàng và cột cùng một lúc. Sử dụng Flexbox cho thanh điều hướng, nhóm nút hoặc các hàng thẻ đơn lẻ. Sử dụng Grid cho bố cục toàn trang, thư viện ảnh, bảng điều khiển và bất kỳ thiết kế nào bạn cần căn chỉnh chính xác trên cả hai trục. Nhiều giao diện người dùng hiện đại kết hợp cả hai — Grid cho khung sườn trang, Flexbox bên trong các ô riêng lẻ.

Làm cách nào để một mục lưới trải dài trên nhiều ô?

Sử dụng grid-column và grid-row với từ khóa span hoặc số thứ tự dòng rõ ràng. Ví dụ: grid-column: span 2 làm cho một mục rộng hai cột, trong khi grid-column: 1 / 4 làm cho nó trải dài từ dòng 1 đến dòng 4. grid-row: 2 / span 3 bắt đầu tại dòng hàng 2 và trải dài ba hàng. Trong trình tạo này, hãy nhấp vào bất kỳ mục nào để chọn, sau đó sử dụng các nút mũi tên trong bảng điều khiển bên để tăng hoặc giảm nhịp hàng và cột của nó — CSS sẽ cập nhật ngay lập tức.

minmax() trong CSS Grid là gì?

minmax(min, max) xác định kích thước track với giới hạn dưới và giới hạn trên. Nó thường được kết hợp với auto-fit hoặc auto-fill trong repeat() để xây dựng các lưới đáp ứng mà không cần truy vấn phương tiện. Ví dụ: repeat(auto-fit, minmax(200px, 1fr)) tạo ra nhiều cột tối thiểu 200px nhất có thể vừa với vùng chứa và kéo giãn chúng để chia sẻ không gian còn lại bằng nhau — đây là mẫu kinh điển cho bố cục thẻ đáp ứng.

Cách sử dụng công cụ này

1. Chọn một cài đặt sẵn khởi đầu — nhấp vào bất kỳ bố cục nào trong sáu cài đặt sẵn ở trên cùng để tải một điểm khởi đầu thực tế, hoặc tự xây dựng từ đầu.
2. Thiết lập hàng và cột — sử dụng bộ đếm hàng và cột để thêm hoặc xóa các track, và chỉnh sửa kích thước mỗi track bằng fr, px, %, auto, hoặc minmax().
3. Đặt và trải rộng các mục — nhấp vào bất kỳ ô trống nào để thêm một mục, hoặc nhấp vào một mục hiện có để chọn nó và sử dụng các nút mũi tên để thay đổi nhịp hàng/cột của nó.
4. Điều chỉnh khoảng cách và căn chỉnh — thiết lập khoảng cách hàng và cột bằng thanh trượt, và chọn justify-items và align-items từ trình đơn thả xuống.
5. Bật lớp phủ dòng — bật số thứ tự dòng lưới để xem chính xác các dòng 1, 2, 3 nằm ở đâu — tuyệt vời để học cách đặt vị trí.
6. Sao chép hoặc tải xuống — chuyển đổi giữa các tab CSS và HTML, sau đó nhấp vào Sao chép hoặc Tải xuống để lấy mã được tạo.

Sáu cài đặt sẵn có sẵn

Các trường hợp sử dụng thực tế

Dành cho nhà phát triển Frontend

• Nhanh chóng tạo nguyên mẫu khung sườn trang trước khi viết mã thành phần
• Tạo các đoạn mã repeat(auto-fit, minmax()) cho lưới thẻ đáp ứng
• Kiểm tra grid-template-areas một cách trực quan trước khi bắt tay vào cấu trúc
• Xuất cả CSS của vùng chứa và cấu trúc HTML tương ứng cùng nhau

Dành cho nhà thiết kế và người học

• Xem chính xác cách fr, auto, và minmax() hoạt động với bản xem trước trực tiếp
• Bật số thứ tự dòng lưới để hiểu cách đặt dựa trên dòng
• Thử nghiệm với các giá trị nhịp mà không cần viết bất kỳ mã nào
• So sánh các cài đặt sẵn cạnh nhau để học các mẫu Grid đặc trưng

Dành cho nhà giáo dục và Blogger

• Minh họa các khái niệm Grid trong các buổi hội thảo với lớp phủ trực quan
• Tạo các mẫu mã sạch cho hướng dẫn chỉ trong vài giây
• Hiển thị cách cùng một cấu trúc CSS Grid mở rộng từ 4 đến 12 cột

Mẹo để có mã CSS Grid sạch hơn

• Ưu tiên fr hơn % — fr tôn trọng các khoảng cách (gaps), trong khi % thì không, vì vậy các lưới dựa trên % có thể bị tràn.
• Sử dụng grid-template-areas cho các vùng được đặt tên — dễ đọc hơn nhiều so với số dòng và có khả năng tự giải thích.
• Sử dụng minmax() với auto-fit cho các lưới đáp ứng mà không cần truy vấn phương tiện.
• Thiết lập khoảng cách rõ ràng với gap: 1rem thay vì lề trên các mục — khoảng cách không bao giờ bị thu hẹp và không cần dọn dẹp.
• Kết hợp Grid và Flexbox — Grid cho khung sườn trang, Flexbox bên trong các ô. Đừng ép buộc một công cụ làm cả hai việc.

Câu hỏi thường gặp

Trình tạo này có hỗ trợ grid-template-areas không?

Cài đặt sẵn Holy Grail sử dụng grid-template-areas trong mã CSS xuất ra. Đối với các cài đặt sẵn khác, chúng tôi sử dụng cách đặt dựa trên dòng (grid-column / grid-row) vì nó thích ứng linh hoạt hơn khi bạn nhấp và sắp xếp lại các mục.

Tôi có thể xuất cả HTML không?

Có — chuyển sang tab HTML trong bảng xuất mã để sao chép cấu trúc HTML sẵn sàng sử dụng, khớp chính xác với mã CSS được tạo.

Mã CSS được tạo có hoạt động trên các trình duyệt cũ không?

CSS Grid được hỗ trợ trong tất cả các trình duyệt hiện đại (Chrome, Edge, Firefox, Safari) và IE11 với việc triển khai một phần. Đối với các trình duyệt hiện đại, không cần phương án dự phòng. Nếu bạn phải hỗ trợ IE11, hãy ưu tiên đặt dựa trên dòng (không dùng gap, không minmax(), không repeat(auto-fit)) và kiểm tra kỹ lưỡng.

Công cụ có lưu trữ dữ liệu trong trình duyệt của tôi không?

Mọi thứ chạy phía máy khách bằng JavaScript. Không có gì được gửi đến máy chủ, vì vậy bố cục, tên mục và cấu hình của bạn được giữ riêng tư trên máy của bạn.

Nó có hoạt động trên di động không?

Có — trình xây dựng sẽ chuyển về dạng một cột trên điện thoại, các bộ điều khiển vẫn có thể chạm được và bản xem trước vẫn tương tác được trên màn hình cảm ứng.

Tài nguyên bổ sung

• CSS Grid Layout - MDN Web Docs
• CSS Grid Layout Module Level 2 - W3C Specification
• CSS Grid Layout - Wikipedia