⭐ 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 3 cột bằng nhau

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ở bộ tạo lưới thành ba cột có chiều rộng bằng nhau trong một hàng, với các khu vực được đặt tên đã tắt — bố cục chỉ lặp lại (3, 1fr), cách ngắn nhất để nói "ba cột luôn chia đều chiều rộng có sẵn."

Các cột có chiều rộng bằng nhau là đặc trưng của lưới thẻ, bảng giá và thư viện hình ảnh: không cần đặt tên khu vực vì mọi cột đều đóng vai trò như nhau, do đó, việc định cỡ rãnh đơn giản sẽ rõ ràng hơn so với khai báo các khu vực mẫu lưới. Thêm một hàng và ba bản nhạc giống nhau lặp lại bên dưới, vẫn hoàn toàn đồng đều.

Tăng số lượng cột để có lưới dày đặc hơn hoặc bật các khu vực được đặt tên nếu cột sau cần nổi bật so với phần còn lại — CSS và HTML bên dưới sẽ cập nhật ngay khi bạn thực hiện. Mọi thứ đều chạy phía máy khách nên không có gì để tải lên và không có gì phải chờ đợi.

🛡️
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.