如何获取不同长度的网格项进行包装？

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％。第二列是最小/最大250px / 1fr。我如何才能将第二列包装在较小的屏幕上？

#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()与使用的网格容器的宽度成比例，并且网格项目根据列数一一排列，并根据需要创建新的行。

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

如果要通过将元素包装到新行中来容纳较小的屏幕，则应使用弹性布局，而不是网格布局。网格布局不适合此目的。