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

Sofia Emelianova

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

Hãy xem video để tìm hiểu cách bật/tắt lớp phủ lưới trong bảng điều khiển Elements (Thành phần) và sử dụng lớp phủ này để:

• 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 đường và khu vực và xem các tên đó 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 Grid Editor (Trình chỉnh sửa lưới) trong ngăn Elements (Phần tử) > Styles (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 lần nhấp vào nút thay vì nhập quy tắc CSS.

Để 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.