Question

我注意到只有Chrome浏览器围绕CSS网格有一些奇怪的行为。当没有指定时，它似乎错误地计算了行高。

简单示例：

.parent {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(8, 9.81183%);
  justify-content: space-around;
}
.child:nth-of-type(odd) {
  border: 1px solid green;
  grid-column-start: 2;
  grid-column-end: 5;
}
.child:nth-of-type(even) {
  border: 1px solid green;
  grid-column-start: 5;
  grid-column-end: 8;
}

我的理解是这里用于行高的默认值是auto，这意味着行应该采用最高网格项的高度。但是在这个小提琴中，看起来好像有足够的空间让文本只包含一行而不是实际需要：https://jsfiddle.net/kessbethler/wve16ak5/4/

这可能看起来不是什么大问题，但是当使用带有长文本块的非常窄的布局时效果会变得明显，就像移动设备一样。 Chrome在此网格容器下方显示一个巨大的空白区域，而在Firefox中，它正是其内容的高度，就像您期望的那样：https://jsfiddle.net/kessbethler/22bmjfnc/6/

有没有人见过这个？有解决方法吗？

Answer 1

问题的根源是容器上的justify-content: space-around。如果删除它，Chrome间隙就会消失。看起来像个bug。

Chrome瘦小的CSS网格神秘差距

1 个答案: