CSS Grid Overlap

На сайте есть грид-контейнер 3х3 и два элемента в сетке — шапка сайта и блок с навигацией. Менеджеры хотят провести A/B-тест: нужно переместить навигацию в шапку сайта. Менять разметку нежелательно: это что-то сломает в стилях или гипотеза не подтвердится. Тогда придётся с болью возвращать всё в исходное состояние. Вы должны придумать другой способ наложить их друг на друга.

.header {
  grid-column: 1/4;
  grid-row: 1/2;
}

.nav {
  grid-column: 1/3;
  grid-row: 1/2;
} 

Значения grid-column и grid-row пересекаются, накладывая элементы друг на друга

Теперь шапка сайта перекрывает и блокирует навигацию. Исправить это позволяет свойство z-index — оно работает и в гридах. Чем больше значение z-index, тем «выше» располагается элемент:

.header {
  grid-column: 1/4;
  grid-row: 1/2;
}

.nav {
  grid-column: 1/3;
  grid-row: 1/2;
  z-index: 1;
} 

Осталось выровнять навигацию уже знакомым свойством align-self:

.header {
  grid-column: 1/4;
  grid-row: 1/2;
}

.nav {
  grid-column: 1/3;
  grid-row: 1/2;
  z-index: 1;
  align-self: end;
} 

Этот способ наложения — временное решение. Вёрстка начнёт ломаться, когда в блоках станет больше элементов или их размеры изменятся. Если гипотеза подтвердится, наложение придётся переделать. Но в бизнесе такие быстрые решения уместны.

#css-grid