CSS Grid 中的行重叠答案

【问题标题】：Rows are overlapping in CSS GridCSS Grid 中的行重叠
【发布时间】：2018-06-08 01:14:49
【问题描述】：

我的.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;
}

【问题讨论】：

你能显示你的预期输出吗？如果你没有混入 React 也会有所帮助，因为这会限制谁能够帮助你。
几乎 - 如果我更改我的 .dailyChart-grid-numbers - grid-row:1/2 然后它会显示正确的位置：imgur.com/a/dv6WtvB 除了现在网格没有一直向下延伸。

标签： reactjs css grid-layout css-grid

【解决方案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

【讨论】：

但我希望行的高度“适合”它们的内容。对像素值进行硬编码似乎不是一个好的解决方案。