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

Question

Чтобы отцентрировать элемент поверх нескольких колонок Grid, обычно используют grid-column для растягивания элемента и place-self: center или flex внутри него. Альтернатива — абсолютное позиционирование относительно grid-контейнера. Grid-способ предпочтительнее, потому что он остаётся декларативным и адаптивным. Абсолютное позиционирование используют, если элемент не должен влиять на сетку

YeaHub · Accepted Answer

Центрирование поверх 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; /* центр по горизонтали и вертикали */
}
grid-column: 1 / -1Элемент растягивается на все колонки.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;
}
Позволяет точно контролировать зону перекрытия.Удобно в сложных layout’ах с семантическими областями.Способ 3. Абсолютное позиционированиеИспользуется, если элемент не должен участвовать в grid-потоке..container {
  position: relative;
  display: grid;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
Элемент полностью “над” сеткойЧасто применяется для:loadersempty statesблокирующих оверлеевЧто выбратьGrid-способЕсли элемент часть layoutЛучше адаптивностьAbsoluteЕсли элемент временный или служебныйПроще для оверлеевВыводДля центрирования поверх колонок Grid лучше начинать с grid-column + place-self, а абсолютное позиционирование использовать только когда элемент не должен участвовать в сетке.