如何获取不同长度的网格项进行包装? [英] How to get grid items of different lengths to wrap?

问题描述

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

With the repeat() and auto-fit / auto-fill functions it's easy to get grid items to wrap when there is a defined length pattern for the columns or rows.

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

In the example below, all columns are a minimum width of 100px and maximum width of 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>

但是当轨道没有长度模式(即长度随机变化)时，如何包装网格项目?

But when the tracks have no length pattern (i.e., lengths vary randomly), how can grid items be made to wrap?

在下面的示例中，第一列的宽度为60％.第二列是最小/最大250px/1fr.我如何才能将第二列包裹在较小的屏幕上?

In the example below, the first column is 60% width. The second column is min/max 250px/1fr. How can I get the second column to wrap on smaller screens?

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是否可以做到这一点.我搜索了 规范 ，但没有找到任何事物.也许我错过了本节.感谢您的帮助.

I know flexbox and media queries provide solutions, but I'm wondering if Grid Layout can do this. I searched the spec but didn't find anything. Maybe I missed the section. Thanks for your help.

推荐答案

网格项实际上没有包装.您看到网格项目包装"到下一行的原因实际上是因为显式网格已更改为保持在minmax()规定的约束之内. repeat()生成的列数与使用的网格容器的宽度成比例，网格项根据列数被一一布置，并根据需要创建新的行.

Grid items do not actually wrap. The reason you see grid items "wrapping" to the next row is really because the explicit grid is being altered to keep within the constraints stipulated by minmax(). The number of columns generated by repeat() is proportional to the used width of the grid container, and the grid items are laid out one by one according to the number of columns, with new rows being created as necessary.

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

So, it is not possible to force the second grid item to wrap when there are two columns and there is room in the explicit grid to insert that grid item in the second column. Besides, even if you could tell the second grid item to "wrap", it would mean placing it in a new row in the first column, so its layout will be governed by the first column and not the second. Having it still be sized according to the second column would, of course, break the grid layout entirely.

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

If the intention is to accommodate smaller screens by wrapping elements to new lines, flex layout should be used, not grid layout. Grid layout is not suitable for this purpose.

这篇关于如何获取不同长度的网格项进行包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！