获取要在 CSS 网格中换行的列

Question

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

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

#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 都不知道容器的后代何时包装。

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

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

这里有更深入的解释：

如果您可以定义列宽，那么网格布局的 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() 函数允许您设置网格轨道的最小和最大尺寸范围。在上面的代码中，列轨道的宽度最小为 100px，最大为可用的 space。

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

获取要在 CSS 网格中换行的列

Getting columns to wrap in CSS Grid

css

css-grid