Как центрировать див в род компоненте, а остальные дивы расположить под ним?

Question

[GNG999]

На рисунке род компонент внутри дивы.

Как центрировать див так, чтобы он был в центре, а остальные распологались за ним ?

Пробовал след решение, взятое из стака

#container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  gap: var(--gap);
}

#first {
  grid-column-start: 2;
}

див центрируется но второй див уходит не под него а становится над ним

Comments

[Александр]

Надеюсь, что idшники никогда не повторятся.

Answer 1

[Антон Усачев]

Можно просто выдать отступ сверху на 50vh... Но если прям чётко нужно, можно добавить немного js-магии.
Пример в кодручке.

Answer 2

[GNG999]

сделал так:

#container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  gap: var(--gap);
}

#first {
  grid-column-start: 2;
}
//добавляем положение дива который хотим расположить под
#second {
  grid-column-start: 3;
}