⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

Bố cục lưới CSS Chén Thánh - Mã sẵn sàng

Thiết kế bố cục Lưới CSS một cách trực quan: đặt cột, hàng và khoảng cách, sau đó nhập tên vùng vào các ô để tạo vùng mẫu lưới — với bản xem trước trực tiếp cũng như CSS và HTML có thể sao chép.

Nhập tên vào bất kỳ ô nào bên dưới; các ô có cùng tên sẽ hợp nhất thành một vùng vùng mẫu lưới.

Đang xử lý... 0%

kết quả

Trang này mở trình tạo lưới được tải sẵn bố cục chén thánh: ba cột và ba hàng, với đầu trang và chân trang trải dài toàn bộ chiều rộng và một hàng điều hướng/chính/phụ ở giữa. Hàng tiêu đề sử dụng chiều cao tự động, hàng giữa lấp đầy khoảng trống còn lại và hai cột bên được cố định ở 200px trong khi cột chính chiếm phần còn lại.

Bố cục chén thánh có tên như vậy vì nó thực sự khó xây dựng một cách đáng tin cậy trước CSS Grid — nhiều năm hack float, bố cục bảng và định vị tuyệt đối đã cố gắng làm giả hình dạng chính xác này. Với Grid-template-areas, nó thu gọn thành năm vùng được đặt tên và một số kích thước rãnh, đó là lý do tại sao nó vẫn là ví dụ tiêu chuẩn đầu tiên để dạy CSS Grid.

Mọi số và khoảng trống trên trang này vẫn tồn tại: thu nhỏ các cột bên, thêm hàng thứ tư hoặc đổi tên một khu vực và bản xem trước cũng như bản cập nhật CSS có thể sao chép ngay lập tức. Sao chép thẳng các khối CSS và HTML vào dự án của bạn — mọi thứ chạy cục bộ trong trình duyệt của bạn, không có gì được tải lên.

🛡️
Thực hiện trong trình duyệt

Các tập tin và dữ liệu đầu vào của bạn sẽ không bao giờ rời khỏi thiết bị này. Quá trình xử lý chạy hoàn toàn ngoại tuyến. An toàn 100%.

Định dạng và quy tắc được chấp nhận

  • Đầu vào số cho 1–6 cột và hàng, cùng với các điều khiển khoảng cách cột và khoảng cách hàng riêng biệt kết hợp thành một giá trị khoảng cách khi chúng khớp với nhau.
  • Chế độ khu vực được đặt tên: nhập tên khu vực thẳng vào bất kỳ ô nào của lưới trực tiếp; công cụ này xây dựng một chuỗi vùng mẫu lưới hợp lệ và cảnh báo khi tên không tạo thành hình chữ nhật rõ ràng.
  • Khối CSS có thể sao chép (hiển thị: lưới, cột/hàng mẫu lưới, khoảng trống, vùng mẫu lưới) cộng với 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 ích chính

✓ Nhập tên thẳng vào bất kỳ ô nào và các tên trùng khớp sẽ hợp nhất thành một vùng vùng mẫu lưới — không cần kéo, không cần đoán cú pháp chuỗi trích dẫn bằng tay.
✓ Lưới xem trước trực tiếp sẽ thay đổi kích thước và đổi màu sau mỗi thay đổi, do đó bạn có thể xem chính xác các cột và hàng cũng như mọi vùng được đặt tên trước khi sao chép một dòng CSS.
✓ Các cài đặt trước như bố cục chén thánh cổ điển và thanh bên hẹp cung cấp cho bạn một khai báo các khu vực mẫu lưới thực sự, đang hoạt động để bắt đầu thay vì một lưới trống.

Trường hợp sử dụng

  • • Xây dựng lớp vỏ trang chén thánh cổ điển — đầu trang và chân trang có chiều rộng đầy đủ với hàng giữa điều hướng/chính/sang một bên — bằng cách nhập tên vùng thay vì viết tay các vùng mẫu lưới.
  • • Bố trí trang cài đặt hoặc bảng điều khiển quản trị viên với thanh bên có chiều rộng cố định bên cạnh cột nội dung linh hoạt và sao chép CSS và HTML chính xác sau khi bản xem trước trực tiếp trông ổn.
  • • Kiểm tra xem tập hợp các khu vực được đặt tên có thực sự tạo thành hình chữ nhật hợp lệ hay không trước khi vận chuyển - công cụ gắn cờ các tên chính xác sẽ phá vỡ các khu vực mẫu lưới trong trình duyệt.