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>
