CSS Сетка: Почему мои разделы, которые должны быть ниже, перемещены здесь в верхние строки?

Question

Я пытаюсь настроить сетку с помощью CSS, и по какой-то причине элементы, которые я определил для go в нижних строках, объединяются в run, как описано выше:

My code on the main element:

  #block-container {
    border: 1px solid steelblue;
    width: 50%;

    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
      "header header header header header"
      "break-setup break-setup . session-setup session-setup"
      "................ timer timer timer .................."
      ".......... .......... buttons ............ ..........";
  }

And other elements:

#title {
  grid-area: header;

  border: 1px solid magenta;
}

#break-setup-container {
  grid-area: break-setup;
  border: 1px solid magenta;
}

#session-setup-container {
 grid-area: session-setup;
 border: 1px solid magenta;
}

#running-time-section {
  grid-area: timer;
  border: 1px solid green;
}

#start-stop-buttons-container {
  grid-area: buttons;
  border: 1px solid blue;
}

Could you let me know why it happens and how could I fix it?

UPDATE:

I was actually able to make it work correctly in an isolated case with such grid layout, where I used HTML and CSS directly ( изолированная сетка ). Не уверен, почему он не работает в моей настройке React

Answer 1

Проблема заключалась в том, что в моем коде React JSX я пытался добавить 2 последних элемента в сетку, и они не были прямыми дочерними элементами родительского <div></div>, следовательно, это нарушало правило родительско-дочерних элементов макета сетки.

Чтобы исправить это, мне пришлось добавить родительский контейнер для #running-time-section и #start-stop-buttons-container в сетку вместо каждого из них отдельно, и расположить эти элементы по отдельности внутри этого контейнера