获取要在CSS Grid中包装的列

Question

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

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

笔记:

该auto-fill功能允许网格尽可能多地排列网格轨道(列或行),而不会溢出容器.这可以创建与flex布局相似的行为flex-wrap: wrap.

该minmax()功能允许您设置网格轨道的最小和最大尺寸范围.在上面的代码中,列轨道的宽度将至少为100px,并且最大可用空间.

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