Отображение гридов в отладчике браузера

При работе с гридами в процессе верстки сайта бывает нужно проверить насколько правильно происходит расстановка элементов в сетке. Кроме того, если у нас допущена ошибка мы должны разобраться с какого элемента идет неправильное размещение. Для этой цели мы можем использовать отладчик в браузере.

Давайте рассмотрим грид на примере отладчика в браузере Chrome. Вначале выбираем интересующий нас объект с грид и кликнув правой кнопкой мыши выбираем из списка опцию 'Просмотреть код':

Теперь в открывшейся справа панели браузера наводим курсор на наш объект с гридом и замечаем, что в строке рядом с родительским элементом находится кнопка grid:

После того как нажали на кнопку grid, мы увидим, что наш объект отображается в визуально понятной системе грид, с указанием нумерации всех столбцов и рядов:

Теперь обратите внимание на панель в отладчике. В ней размещены вкладки Styles, Computed, Layout и прочее. Переключитесь с вкладки Styles, которая активна по умолчанию, на вкладку Layout. Вы увидите список настроек вашего грида:

Давайте выберем для отображения первую опцию Show track sizes, которая показывает размер треков:

C помощью опции Show area names можно отобразить имена областей грида, если они заданы. А выбрав опцию Extend grid lines мы увидим продленные за рамки грида линии треков: