auto-fit + minmax(300px, 1fr) 是首选，因它让浏览器实时按容器宽与最小项宽（300px）自动计算列数：小屏单列、中屏双列、大屏多列；auto-fit 收缩空轨道防留白，minmax 中300px保障交互安全，兼容主流现代浏览器。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能实现真正动态的多列展示，不需要写一堆媒体查询，也不依赖 JS 计算列数。
为什么 auto-fit + minmax() 是首选
这组组合不是“猜设备”，而是让浏览器实时根据容器宽度和最小项宽（比如 300px）自动算出最多能塞几列。小屏下撑不开两列，就退成单列；中屏刚好两列；大屏可能三列甚至四列——前提是内容够多。
-
auto-fit会收缩未被占用的隐式轨道，避免留白；auto-fill则保留所有预分配列，容易在内容少时出现空列 -
minmax(300px, 1fr)中的300px是交互安全阈值：小于它，文字难读、按钮易误点；大于它，小屏可能横向滚动 - 这个写法兼容 Chrome/Firefox/Safari 14.1+ 和 Edge 16+；老 Safari（@media + 固定
repeat(3, 1fr)
gap 必须显式设置，不能靠 margin 模拟
Grid 的 gap 是布局层原生间距，不参与盒模型计算，不会触发 margin 折叠或父容器 overflow 问题。用 margin 模拟等效间隙，大概率导致首行/末行错位、响应式掉行。
- 统一写
gap: 16px即可同时控制行列间距 - 若需行列间距不同，改用
row-gap: 20px; column-gap: 12px - 别在子元素上写
margin-right/bottom—— Grid 容器里它们会被忽略或引发渲染异常
动态内容多列失效？先查这三处
样式写了却没效果，90% 不是 Grid 写错了，而是底层结构干扰了渲染逻辑。
- 父容器没撑开高度/宽度：检查是否被
overflow: hidden裁剪，或外层用了display: inline-grid导致宽度由内容决定 - 子元素不是直系后代：比如把
<label></label>和<input>并列放进 Grid 容器，Grid 会把每个标签当独立 item 处理，造成视觉断层 - 第三方 CSS 覆盖：某些 UI 库强制设
.form input { display: inline-block }，优先级高于你的 Grid 布局，得加!important或提高选择器 specificity
真正难的不是写对那行 repeat(auto-fit, ...)，而是确保所有子元素都干净地落在 Grid 轨道上——没有隐藏的 display 覆盖，没有意外的嵌套层级，也没有被父容器悄悄截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
