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

当使用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>

HTML和CSS都没有容器的后代何时 Package 的概念。
本质上，浏览器在初始级联期间呈现文档。当子级换行时，它不会重排文档。
因此，要更改列数，您需要在线沿着某处设置宽度限制或使用媒体查询。
以下是更深入的解释：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()**功能允许您设置网格轨道的最小和最大大小范围。在上面的代码中，列轨道的宽度将是最小的100px和最大的任何可用空间。

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

展开查看全部

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

1条答案

相关问题

热门标签

最新问答