我注意到只有在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/

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

最佳答案

问题的根源是容器上的justify-content: space-around。如果将其删除,Chrome间隙将消失。看起来像个错误。

关于css - Chrome瘦CSS网格神秘缺口,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49951135/

10-12 12:26
查看更多