CSS网格-溢出时如何让所有列/行均匀增长

Question

我觉得我在这一点上遗漏了一些东西，因为我观察到的行为并不完全一致。

我正在使用 JavaScript 生成随机网格。我在网格上设置了许多列和行，然后分别设置了单元格的开始值和结束值。我想要的是当溢出时（即单元格的内容高于我想要的最小值，50px），单元格会增长，并且同一行上的单元格也会增长。请参阅this Fiddle

我在这里使用

grid-template-rows: repeat(4, minmax(50px, auto));

但是，如您所见，由于某种原因，只有第 3 行会增长，而第 4 行不会增长。这可以通过将该行设置为来解决

grid-template-rows: repeat(4, minmax(50px, 1fr));

但这会导致 all 行在发生此溢出时均匀增长，这不是我想要的。见this Fiddle

另外，奇怪的是，当我溢出第 6 个单元格而不是第 4 个单元格时，它确实起作用。请参阅 this Fiddle。第 2 行和第 3 行生长均匀，因为第 6 格占据了两者。这也是我在第一个示例中所期望和想要的行为。

这是一个错误吗？在 Chrome 和 Firefox 上也是如此，所以我想我只是错过了一些东西。

Answer 1

在您的第一个小提琴中，不同之处在于第三行中没有跨越单行的元素。这就是这一行和第四行的区别。

您可以通过添加幻像元素来填充所有行来解决这个问题：（sn-p 中的填充元素）

计算网格尺寸时，只考虑跨行的项目。原因是这些项目施加的限制不如其他项目灵活，因为它们只能在特定行中处理。

稍后，将考虑跨越 2 行的项目。这样做时，如果 2 行被占用，并且项目高于已计算的空间，则两行都会增长。但是，如果只有一行已计算（因为其中有元素）而另一行没有计算，那么最好的选择是**保留*已计算行的维度，仅增长另一行一个。

body{margin:0;padding:20px;font-size:24px;font-family:sans-serif}
body > div{
  display: grid;
  max-width: 500px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(4, minmax(50px, auto));
  grid-gap: 20px;
}
body > div > div{
  padding: 20px;
  background-color: #CCC;
}
body > div > div:nth-child(1){
  grid-row-start:    1;
  grid-column-start: 1;
}
body > div > div:nth-child(2){
  grid-row-start:    1;
  grid-column-start: 2;
}
body > div > div:nth-child(3){
  grid-row-start:    1;
  grid-row-end:      3;
  grid-column-start: 3;
}
body > div > div:nth-child(4){
  grid-row-start:    3;
  grid-row-end:      5;
  grid-column-start: 2;
}
body > div > div:nth-child(5){
  grid-row-start:    4;
  grid-column-start: 1;
}
body > div > div:nth-child(6){
  grid-row-start:    2;
  grid-row-end:      4;
  grid-column-start: 1;
}

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
  <div>5</div>
  <div>6</div>
  <filler></filler>
  <filler></filler>
  <filler></filler>
  <filler></filler>
</div>

Answer 2

我认为您不需要为每个人指定grid-row-end。这些行还需要具有相同的grid-row-start 值。 希望这是理想的结果：

See the fiddle.