Как отцентрировать элемент поверх нескольких колонок Grid?

Центрирование поверх Grid — частый кейс для баннеров, модалок, оверлеев и пустых состояний.

Определение

Определение: Центрирование поверх Grid — это размещение элемента так, чтобы он перекрывал несколько колонок и визуально находился по центру, не нарушая структуру сетки.

Способ 1. Через grid-column + place-self

Это самый “grid-native” подход.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

.overlay {
  grid-column: 1 / -1; /* перекрываем все колонки */
  place-self: center; /* центр по горизонтали и вертикали */
}

1. grid-column: 1 / -1

   • Элемент растягивается на все колонки.

2. place-self: center

   • Центрирует элемент внутри доступной области.

Подходит, если элемент логически часть grid-контента.

Способ 2. Через grid-area

Если используются именованные области:

.container {
  display: grid;
  grid-template-areas:
    "sidebar main main";
}

.overlay {
  grid-area: sidebar / sidebar / main / main;
  place-self: center;
}

1. Позволяет точно контролировать зону перекрытия.

2. Удобно в сложных layout’ах с семантическими областями.

Способ 3. Абсолютное позиционирование

Используется, если элемент не должен участвовать в grid-потоке.

.container {
  position: relative;
  display: grid;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

1. Элемент полностью “над” сеткой

2. Часто применяется для:

   • loaders

   • empty states

   • блокирующих оверлеев

Что выбрать

1. Grid-способ

   • Если элемент часть layout

   • Лучше адаптивность

2. Absolute

   • Если элемент временный или служебный

   • Проще для оверлеев

Вывод

Для центрирования поверх колонок Grid лучше начинать с grid-column + place-self, а абсолютное позиционирование использовать только когда элемент не должен участвовать в сетке.