CSS 网格中的行重叠

Question

我的 .dailyChart-grid-numbers 应该允许我在最顶层列出数字，并且它们的边框应该一直向下延伸。一切正常，除了 .dailyChart-box-top 坚持与 .dailyChart-grid-numbers.

共享同一行

这是实际操作：https://codesandbox.io/s/z6y936r2mx

这里只是 CSS:

.dailyChart{
    display: grid;
    grid-template-columns: repeat(24,1fr)
}
.dailyChart-box-middle{
    background-color: red;
    border-right: 2px solid #000000;
    grid-row: 3/4
}

.dailyChart-box-top{
    background-color: green;
    grid-row: 2/3;
}

.dailyChart-box-bottom{
    background-color: blue;
    grid-row: 4/5;
}

.dailyChart-grid-numbers{
    border-right: 1px solid #000000;
    grid-row: 1/5;
    align-items: start;
}

Answer 1

您还没有定义任何行。这意味着行是隐式创建的。

隐式行的高度由 grid-auto-rows 属性控制，其默认值为 auto。这就是问题所在 – auto 值，它与同一轨道上的其他项目相关。

如果你定义一个值，问题似乎就解决了。尝试这样的事情：

.dailyChart {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 25px; /* new */
}

https://codesandbox.io/s/100vxj7wr7

CSS 网格中的行重叠

Rows are overlapping in CSS Grid

css

grid-layout

reactjs

css-grid