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

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

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

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

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

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

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

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

← →
↑