Mẹo cho công cụ cho nhà phát triển: Cách kiểm tra lưới CSS

Sofia Emelianova
Sofia Emelianova

Công cụ của Chrome cho nhà phát triển giúp cho việc gỡ lỗi bố cục lưới CSS trở nên trực quan với nhiều tuỳ chọn hình ảnh hoá.

Xem video này để tìm hiểu cách bật/tắt lớp phủ lưới trong bảng điều khiển Phần tử và sử dụng lớp phủ này để:

Lớp phủ lưới.

  • Trực quan hoá và kiểm tra bố cục lưới.
  • Xem số hàng và số cột để tham khảo khi đặt các mục trong lưới.
  • Sử dụng tên dòng và tên vùng và xem chúng trên lớp phủ nếu bạn có nhiều mục lưới và các con số gây nhầm lẫn.
  • Kiểm tra kích thước của bản nhạc.

Ngoài ra, với Trình chỉnh sửa lưới trong ngăn Phần tử > Kiểu, bạn có thể căn chỉnh các mục và nội dung của các mục đó trong bố cục lưới chỉ bằng một cú nhấp chuột thay vì nhập quy tắc CSS.

Trình chỉnh sửa lưới.

Để có trải nghiệm học tập thực tế hơn, hãy làm theo hướng dẫn Kiểm tra lưới CSS.