Trình tạo CSS Grid

Một khai báo grid-template-areas là một trong những đoạn CSS dễ đọc nhất, nhưng chỉ khi nó đã tồn tại — để tạo ra nó bằng tay có nghĩa là phải đếm các chuỗi trích dẫn và khớp độ dài hàng, chỉ cần một ô không khớp là toàn bộ bố cục âm thầm hỏng. Trình tạo này biến việc đó thành thao tác trực tiếp: đặt số cột và hàng, gõ tên vào bất kỳ ô nào trên lưới trực tiếp, các tên khớp nhau sẽ tự động hợp nhất thành một vùng được đặt tên.

Bên dưới, mỗi ô bạn để trống sẽ trở thành một dấu chấm trong chuỗi grid-template-areas được sinh ra, còn mỗi ô bạn đặt tên sẽ trở thành một phần của hình chữ nhật mang tên đó. CSS chỉ cho phép một vùng được đặt tên chiếm đúng một khối chữ nhật sạch, vì vậy công cụ kiểm tra điều đó khi bạn gõ và cho bạn biết chính xác khi nào một tên chưa tạo thành hình chữ nhật hợp lệ — thay vì âm thầm tạo ra CSS mà trình duyệt sẽ từ chối.

Khoảng cách cột và khoảng cách hàng mặc định là 8px và gộp thành một dòng gap duy nhất khi chúng khớp nhau, còn lưới xem trước luôn phản ánh chính xác các track grid-template-columns và grid-template-rows của bạn, bao gồm các cột pixel cố định từ mẫu có sẵn như các thanh ray bên 200px của bố cục holy grail. Đầu ra có thể sao chép bao gồm cả hai phía: một khối CSS sẵn sàng cho stylesheet của bạn và một khung HTML tương ứng với một div grid-area cho mỗi vùng được đặt tên.

Grid và flexbox giải quyết các bài toán bố cục khác nhau, và công cụ css-flexbox-generator trên trang này là điểm khởi đầu tốt hơn cho các bố cục một chiều — một hàng hoặc cột duy nhất gồm các mục linh hoạt như thanh điều hướng hoặc chồng thẻ. Hãy dùng trình tạo grid này khi bạn cần kiểm soát hai chiều, các hàng và cột tường minh, hoặc các vùng được đặt tên như header/nav/main/footer; hai công cụ thường xuất hiện cùng trang, grid cho khung trang và flexbox cho các thành phần bên trong nó. Giống như mọi công cụ trên trang này, nó chạy hoàn toàn trong trình duyệt của bạn — không tải lên, không cần tài khoản.