如何获取不同长度的网格项目？

Question

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

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

jsFiddle演示

#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%.第二列是最小/最大250px/1fr.如何让第二列包装在较小的屏幕上？

jsFiddle演示

#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和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了规格,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.

Answer 1

网格项目实际上不会换行。您看到网格项“环绕”到下一行的原因实际上是因为显式网格正在被更改以保持在minmax(). 生成的列数repeat()与网格容器的使用宽度成正比，网格项根据列数一一布置，必要时创建新行。

因此，当有两列并且显式网格中有空间可以在第二列中插入该网格项时，不可能强制第二个网格项换行。此外，即使您可以告诉第二个网格项“换行”，这也意味着将其放置在第一列的新行中，因此其布局将由第一列而非第二列控制。如果它仍然根据第二列调整大小，当然会完全破坏网格布局。

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