30

使用 时如何指定最大列数，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>

4

1 回答 1

62

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()功能允许您设置网格轨道的最小和最大尺寸范围。在上面的代码中，列轨道的宽度最小为 100 像素，最大为任何可用空间。

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

于 2017-04-27T17:48:45.253 回答