让列在 CSS Grid 中换行

Question

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

例如，我有以下内容，当内容空间不足时，它不会进入单列模式。

#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>

Answer 1

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

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

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

这里有更深入的解释：Make container shrink-to-fit child elements as they wrap

---

如果您可以定义列宽，那么网格布局的auto-fill 函数可以轻松进行换行。

在本例中，列数完全取决于屏幕宽度：

#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

注意事项：

auto-fill 函数允许网格排列尽可能多的网格轨道（列或行）而不会溢出容器。这可以创建类似于 flex 布局的 flex-wrap: wrap 的行为。

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

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