在CSS Grid中使列换行

Question

在CSS Grid中使列换行

40

你如何在使用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>

- Panda TG Attwood

规范是 CSS网格 - 无需媒体查询的最大列数，但由于您说“无需媒体查询”，我不会重复提及。 - TylerH

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

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示例：

注：

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

minmax()函数允许您为网格轨道设置最小和最大大小范围。在上面的代码中，列轨道的宽度将至少为100px，最大为可用的自由空间。

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