Наложение двух объектов друг на друга CSS Grid

#html #css #css3 #вёрстка #css_grid

                    
Как на одной сетке CSS Grid наложить два объекта так, чтобы один оказался снизу,
а другой сверху?
    

Ответы

Ответ 1

Надо просто явно задать нахождения ячеек.

К примеру, через grid-row и grid-column:



.grid {
  display: grid;
  grid-auto-rows: 100px; /* размер "неявных" строк, для демонстрации */
  grid-auto-columns: 100px; /* размер "неявных" столбцов, для демонстрации */
}

.item-1 {
  background-color: yellow;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.item-2 {
  background-color: lime;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

  

  






Для управления наложением используйте z-index.



.grid {
  display: grid;
  grid-auto-rows: 100px; /* размер "неявных" строк, для демонстрации */
  grid-auto-columns: 100px; /* размер "неявных" столбцов, для демонстрации */
}

.item-1 {
  background-color: yellow;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  z-index: 1; /* чтобы этот был элемент был сверху */
}

.item-2 {
  background-color: lime;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

  

  






Также можете сделать через grid-area:



.grid {
  display: grid;
  grid-template-columns: [item-1-start] 100px [item-2-start] 100px [item-1-end] 100px
[item-2-end];
  grid-template-rows: [item-1-start] 100px [item-2-start] 100px [item-1-end] 100px
[item-2-end];
}

.item-1 {
  background-color: yellow;
  grid-area: item-1;
}

.item-2 {
  background-color: lime;
  grid-area: item-2;
}