Question

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

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

＆＃13;

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}

＆＃13;

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

＆＃13;

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

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

获取要在CSS Grid中包装的列

1 个答案: