将列包装在 CSS 网格中

Getting columns to wrap in CSS Grid

提问by Panda TG Attwood

How can you specify the maximum number of columns when using display: grid;, with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries?

如何在使用时指定最大列数，当display: grid;内容变得太宽（或小于最小尺寸）时它会自动中断？有没有办法在没有媒体查询的情况下做到这一点？

For example, I have the following which won't break into a single column mode when there is not enough room for the content.

例如，当内容空间不足时，我有以下内容不会中断到单列模式。

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

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

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

回答by Michael Benjamin

Neither HTML or CSS have any concept of when descendants of a container wrap.

HTML 或 CSS 都没有任何关于容器的后代何时换行的概念。

Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.

本质上，浏览器在初始级联期间呈现文档。当孩子换行时，它不会重排文档。

Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.

因此，要更改列数，您需要沿线某处设置宽度限制或使用媒体查询。

Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap

这里有一个更深入的解释：在包装时使容器收缩以适应子元素

---

---

If you can define a column width, then grid layout's auto-fillfunction makes wrapping easy.

如果您可以定义列宽，则网格布局的auto-fill功能使换行变得容易。

In this example, the number of columns is based entirely on the width of the screen:

在这个例子中，列数完全基于屏幕的宽度：

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */
  grid-gap: 1em;
}

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

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

jsFiddle demo

jsFiddle 演示

Notes:

笔记：

The auto-fillfunction allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.

该auto-fill功能允许网格在不溢出容器的情况下排列尽可能多的网格轨道（列或行）。这可以创建与 flex 布局的flex-wrap: wrap.

The minmax()function allows you to set a minimum and maximum size range for a grid track. In the code above, the width of column tracks will be a minimum of 100px and maximum of whatever free space is available.

该minmax()功能允许您设置网格轨道的最小和最大尺寸范围。在上面的代码中，列轨道的宽度最小为 100 像素，最大可用空间。

The frunit represents a fraction of the available space. It is similar to flex-growin flex layout.

该fr单位代表可用空间的一小部分。它类似于flex-growflex 布局。