Відображення grid у відладчику браузера

Відображення grid у відладчику браузера

Під час створення сайтів за допомогою CSS Grid іноді потрібно перевірити, чи правильно розташовані елементи у сітці. Відладчик браузера допомагає побачити структуру grid, колонки, рядки та знайти помилки у розміщенні елементів.

1. Відкриваємо інструменти розробника

Спочатку потрібно знайти елемент, який використовує CSS Grid. Натисніть правою кнопкою миші на елементі та виберіть пункт «Переглянути код» (Inspect).

2. Знаходимо кнопку grid

У панелі Elements біля батьківського елемента з display: grid з'явиться спеціальна кнопка grid.

3. Вмикаємо відображення сітки

Після натискання кнопки grid браузер покаже структуру сітки: номери колонок, рядків та межі grid-контейнера.

4. Налаштування Grid у вкладці Layout

У правій частині DevTools відкрийте вкладку Layout. Там знаходяться додаткові налаштування відображення CSS Grid.

Корисні налаштування Grid

• Show track sizes — показує розміри колонок і рядків.
• Show area names — показує назви областей grid, якщо вони створені через grid-template-areas.
• Extend grid lines — продовжує лінії сітки за межі контейнера.

Приклад CSS Grid

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  gap: 20px;
}

.grid div {
  border: 1px solid green;
}