获取列以包装在CSS Grid中

获取列以包装在CSS Grid中

HTML或CSS都没有关于何时容器包装后代的概念。

本质上，浏览器在初始级联期间渲染文档。子包装时，它不会重排文档。

因此，要更改列数，您将需要在行的某处设置宽度限制或使用媒体查询。

---

如果您可以定义列宽，那么网格布局的

auto-fill

功能将使包装变得容易。

在此示例中，列数完全基于屏幕的宽度：

#grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));   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>