Hiển thị Grid trong trình gỡ lỗi của trình duyệt

Khi làm việc với grid trong quá trình dựng trang web, đôi khi cần phải kiểm tra xem việc sắp xếp các phần tử trong lưới có đúng hay không. Ngoài ra, nếu có lỗi, chúng ta cần tìm hiểu phần tử nào đang được bố trí sai. Để làm điều này, chúng ta có thể sử dụng trình gỡ lỗi trong trình duyệt.

Hãy xem xét grid trong ví dụ sử dụng trình gỡ lỗi của trình duyệt Chrome. Đầu tiên, chọn đối tượng có grid mà chúng ta quan tâm, nhấp chuột phải và chọn tùy chọn 'Inspect' từ danh sách:

Bây giờ, trong bảng điều khiển mở ra ở bên phải trình duyệt, di chuột qua đối tượng có grid của chúng ta và để ý rằng trên dòng bên cạnh phần tử cha có một nút grid:

Sau khi nhấp vào nút grid, chúng ta sẽ thấy đối tượng của mình được hiển thị trong một hệ thống grid trực quan, dễ hiểu, với số thứ tự của tất cả các cột và hàng được chỉ ra:

Bây giờ hãy chú ý đến bảng điều khiển trong trình gỡ lỗi. Nó chứa các tab Styles, Computed, Layout, v.v. Chuyển từ tab Styles (mặc định đang hoạt động) sang tab Layout. Bạn sẽ thấy danh sách cài đặt cho grid của mình:

Hãy chọn tùy chọn đầu tiên Show track sizes để hiển thị kích thước của các track:

Với tùy chọn Show area names, bạn có thể hiển thị tên các vùng của grid nếu chúng được đặt. Và khi chọn tùy chọn Extend grid lines, chúng ta sẽ thấy các đường track được kéo dài ra ngoài khung grid: