CSS Grid如何实现自动换行且列宽随内容动态自适应收缩？

实现方案 #

完全可以实现，你遇到的问题是默认Grid轨道会拉伸占满可用空间，且你指定了固定列宽，调整配置即可：

方案1：Grid原生实现（列宽最大不超过指定值，自动适配内容+自动换行） #

修改你的Grid配置如下：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, 186px));
grid-auto-columns: min-content;
justify-content: start; /* 关键配置：禁止列拉伸占满剩余空间 */
gap: 16px; /* 可替换为你需要的单元格间距 */

这个配置的效果：

• 列数会根据屏幕宽度自动调整，空间不足时自动换行
• 每列宽度最小适配内容宽度，最大不会超过你设定的186px
• 非满行的列不会强制拉伸到和上行列宽一致，会自动收缩到内容宽度

方案2：Flex兼容实现（无Grid列宽统一限制，完全由内容决定宽度） #

如果你的需求是所有列（包括满行列）都不需要统一宽度，完全由自身内容决定，这种场景用Flex实现更简单：
父元素配置：

display: flex;
flex-wrap: wrap;
gap: 16px; /* 单元格间距 */

子元素配置：

flex: 0 0 auto;
max-width: 186px; /* 可选，需要限制最大宽度时添加 */

该方案兼容所有现代浏览器，完全满足自动换行+列宽随内容动态收缩的需求，同时也支持设置行高统一、子元素对齐等Grid具备的布局特性。

内容的提问来源于stack exchange，提问作者Eric Rose