Question

使用repeat()和auto-fit / auto-fill函数，当列或行定义了长度模式时，很容易获取网格项来包装

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

＆＃13;

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

＆＃13;

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

＆＃13;

但是当轨道没有长度模式（即长度随机变化）时，网格物品如何包裹？

在下面的示例中，第一列的宽度为60％。第二列是最小/最大250px / 1fr。如何让第二列包裹在较小的屏幕上？

jsFiddle demo

＆＃13;

#grid {
  display: grid;
  grid-template-columns: 60% minmax(250px, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

＆＃13;

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

＆＃13;

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

Answer 1

网格项目实际上并不包裹。你看到网格项目＆＃34;包装＆＃34;到下一行真的是因为显式网格被改变以保持在minmax()规定的约束范围内。 repeat()生成的列数与网格容器的使用宽度成比例，网格项根据列数逐个布局，并根据需要创建新行。

因此，当有两列时，无法强制第二个网格项进行换行，并且显式网格中有空间将该网格项插入第二列。此外，即使你可以告诉第二个网格项目＆＃34; wrap＆＃34;，这意味着将它放在第一列中的新行中，所以它的布局将由第一列而不是第二列控制。当然，根据第二列确定它的大小将完全打破网格布局。

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

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

1 个答案: