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 Grid中重叠

1 个答案: