CSS 网格：为什么我应该在下面的部分在这里移到了上面的行？

Question

我正在尝试使用 CSS 设置网格，出于某种原因，我定义为进入较低行的元素正在以这种方式合并到上面的运行中：

我在主元素上的代码：

  #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 ............ ..........";
  }

和其他元素：

#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;
}

你能告诉我为什么会这样吗？我该如何解决？

更新：

我实际上能够在具有这种网格布局的孤立情况下使其正常工作，我直接使用了 HTML 和 CSS (isolated grid)。不确定为什么它在我的 React 设置中不起作用

Answer 1

问题是，在我的 React JSX 代码中，我试图将最后两个元素添加到网格中，但它们不是父元素的直接子元素 <div></div>，因此它违反了网格的父子规则布局。

为了解决这个问题，我必须将 #running-time-section 和 #start-stop-buttons-container 的父容器添加到网格中，而不是将它们分别添加到网格中，然后在该容器中单独排列这些元素

CSS 网格：为什么我应该在下面的部分在这里移到了上面的行？

CSS Grid: Why do my sections that supposed to be below are moved up to the upper rows here?

css

grid

css-grid