获取列以包装在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>