使用 auto-fill 配合 minmax() 定义列宽，利用 gap 控制间距，即可实现无媒体查询的自适应网格。浏览器会自动计算每行能容纳的最大列数，并在容器宽度变化时重新排列，无需手动指定断点。

如何设置最小和最大列宽以控制换行

通过 minmax(min, max) 函数设定单列的最小宽度和最大宽度，当容器变窄时，列数减少；变宽时，列数增加。例如 repeat(auto-fill, minmax(200px, 1fr)) 表示每列至少 200px，剩余空间平分。

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;

如何处理最后一行对齐问题

默认情况下，最后一行项目可能左对齐且宽度不均。若希望最后一行也撑满或居中，可结合 justify-content 或使用 auto-fit 替代 auto-fill。auto-fit 会合并空轨道，使项目拉伸填满整行。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

/* auto-fill：保留空轨道，最后一行可能不满 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit：合并空轨道，最后一行拉伸 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

基于 gap 属性对网格间距的具体影响

gap 属性同时控制行间距和列间距，值相同时形成均匀网格。它不影响网格轨道大小计算，仅在项目间插入空白。若需不同方向间距，可使用 row-gap 和 column-gap 分别设置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！