6

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

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

我在这里使用

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

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

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

但这会导致在发生这种溢出时所有行均匀增长，这不是我想要的。看到这个小提琴

此外，奇怪的是，当我溢出第 6 个单元格而不是第 4 个单元格时，它确实有效。看到这个小提琴。第 2 行和第 3 行生长均匀，因为第 6 格占据了两者。这也是我在第一个示例中期望和想要的行为。

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

4

2 回答 2

2

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

您只需添加幻像元素以填充所有行即可解决此问题：（片段中的填充元素）

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

稍后，将考虑跨越 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>

于 2018-07-02T20:56:54.720 回答
0

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

见小提琴。

于 2018-07-02T15:32:53.737 回答