Trình tạo lưới CSS

Khai báo các vùng mẫu lưới là một trong những phần CSS dễ đọc nhất hiện có, nhưng chỉ khi nó tồn tại - đến đó bằng tay có nghĩa là đếm các chuỗi được trích dẫn và độ dài hàng khớp và một ô không khớp sẽ âm thầm phá vỡ toàn bộ bố cục. Trình tạo này biến điều đó thành thao tác trực tiếp: đặt số lượng cột và hàng, nhập tên vào bất kỳ ô nào của lưới trực tiếp và các tên phù hợp sẽ tự động hợp nhất thành một vùng được đặt tên.

Dưới mui xe, mỗi ô bạn để trống sẽ trở thành một dấu chấm trong chuỗi vùng mẫu lưới được tạo và mọi ô bạn đặt tên sẽ trở thành một phần của hình chữ nhật của tên đó. CSS chỉ cho phép một vùng được đặt tên chiếm một khối hình chữ nhật sạch, do đó công cụ sẽ kiểm tra điều đó khi bạn nhập và cho bạn biết chính xác khi nào tên chưa tạo thành hình chữ nhật hợp lệ — thay vì âm thầm tạo CSS, 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à kết hợp thành một đường khoảng cách duy nhất khi chúng khớp với nhau, đồng thời lưới xem trước trực tiếp luôn phản ánh các rãnh lưới-mẫu-cột và lưới-mẫu-hàng của bạn, bao gồm các cột pixel cố định từ giá trị đặt trước như đường ray bên 200px của chén thánh. Đầu ra có thể sao chép bao gồm cả hai mặt: khối CSS sẵn sàng cho biểu định kiểu của bạn và khung HTML phù hợp với một div vùng lưới cho mỗi vùng được đặt tên.

Lưới và flexbox giải quyết các vấn đề về bố cục khác nhau và trình tạo css-flexbox trên trang này là điểm khởi đầu tốt hơn cho bố cục một chiều — một hàng hoặc cột gồm các mục linh hoạt như thanh điều hướng hoặc chồng thẻ. Thay vào đó, hãy sử dụng trình tạo lưới này khi bạn cần điều khiển hai chiều, các hàng và cột rõ ràng hoặc các vùng được đặt tên như đầu trang/điều hướng/chính/chân trang; hai công cụ này thường kết thúc trên cùng một trang, tạo lưới cho khung trang và flexbox bên trong các phần của nó. Giống như mọi công cụ trên trang web này, nó chạy hoàn toàn trong trình duyệt của bạn — không cần tải lên, không cần tài khoản.