如何让不同长度的网格项目包裹起来？

Question

使用 repeat() 和 auto-fit / auto-fill 函数很容易让网格项目换行 当列或行有定义的长度模式时.

在下面的示例中，所有列的最小宽度为 100px，最大宽度为 1fr。

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

但是当轨道没有长度模式（即长度随机变化）时，如何使网格项目环绕？

在下面的示例中，第一列的宽度为 60%。第二列是 min/max 250px/1fr。如何让第二列在较小的屏幕上换行？

jsFiddle demo

#grid {
  display: grid;
  grid-template-columns: 60% minmax(250px, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
</div>

我知道 flexbox 和媒体查询提供了解决方案，但我想知道网格布局是否可以做到这一点。我搜索了 spec 但没有找到任何东西。也许我错过了这一部分。感谢您的帮助。

Answer 1

网格项目实际上并不换行。您在下一行看到网格项 "wrapping" 的原因实际上是因为正在更改显式网格以保持在 minmax() 规定的约束范围内。 repeat()生成的列数与网格容器使用的宽度成正比，网格项按照列数逐一布局，必要时新建行。

因此，当有两列并且显式网格中有空间可以将该网格项插入第二列时，无法强制第二个网格项换行。此外，即使您可以将第二个网格项告诉"wrap"，这也意味着将它放在新行第一列 ]，所以它的布局将由第一列而不是第二列决定。让它仍然根据第二列调整大小当然会完全破坏网格布局。

如果打算通过将元素换行来适应较小的屏幕，则应使用弹性布局，而不是网格布局。网格布局不适合此目的。

如何让不同长度的网格项目包裹起来？

How to get grid items of different lengths to wrap?

css

css-grid