repeat(auto-fit, minmax())是Grid原生最稳的响应式列数方案，不依赖JS或CSS变量，通过浏览器自动计算容器宽度与子项最小宽决定列数，auto-fit收缩空轨道，minmax()设下限防压缩，兼容性好且无需媒体查询。
用 repeat(auto-fit, minmax()) 实现列数自动响应
这不是“动态变量控制”，而是 Grid 原生最稳的响应式列数方案。它不依赖 JS 或 CSS 变量，浏览器兼容性好（Chrome 57+、Firefox 52+、Safari 10.1+），且能真正根据容器宽度和子项最小宽度决定最终列数。
常见错误是写成 repeat(auto-fill, minmax(240px, 1fr))) 后发现最后一行留白太多——auto-fill 会生成所有可能轨道，哪怕没内容；而 auto-fit 会把空轨道收缩掉，让剩余空间由有内容的列均分。
-
minmax(240px, 1fr)中的240px是子项最小宽度，不能写成minmax(0, 1fr)，否则窄屏下文字会被压扁 - 必须配合
display: grid和显式grid-template-columns才生效，仅靠gap不起作用 - 如果卡片本身有固定宽高或
min-width，要确保它不强制撑开轨道，必要时加min-w-0（Tailwind）或min-width: 0
用 CSS 变量 + repeat(var(--cols), ...) 控制精确列数
当你需要“严格 4 列”“强制 5 列”这类确定性布局（比如后台表格、仪表盘控件），而不是“尽可能多列”，CSS 变量才是正解。但直接写 repeat(var(--cols), 1fr) 很容易崩。
关键在于：必须用 minmax(0, 1fr) 替代纯 1fr，否则在窄容器中每列会压缩到像素级，文字重叠、溢出或换行错乱。
- 变量定义必须是无单位数字：
:root { --cols: 4; }，不能写成--cols: "4"或--cols: 4px - 推荐写法：
grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); - 媒体查询可覆盖变量：
@media (max-width: 768px) { :root { --cols: 2; } }，但注意变量作用域——若网格容器不在:root下，需在对应选择器内重定义 - JS 修改时要用字符串：
el.style.setProperty('--cols', '3')，传数字会隐式转字符串，但显式更安全
gap 的双值写法与单位陷阱
gap 看似简单，但列间距和行间距不同值时顺序极易写反。标准是 gap: ，不是“上下左右”那种顺时针。
例如 gap: 12px 8px 表示行间距 12px、列间距 8px；写成 gap: 8px 12px 就全反了。更隐蔽的问题是：设了 gap: 0 后发现仍有空隙？那大概率是子项自己带了 margin ——gap 和 margin 是叠加关系，不是替代。
- 避免混用：
gap: 10px时，子项别再写margin: 5px，否则视觉间隙变成 20px - 想只调列间距？用
column-gap: 16px，比gap: 0 16px更直白不易错 - gap 不生效？检查是否至少有两行或两列轨道——单列 Grid 只显示行间距，单行 Grid 只显示列间距
嵌套 Grid 时的间距继承与隔离
外层 gap 不会影响内层 Grid 的轨道间距，但如果你在外层设了 gap: 20px，又在内层 Grid 容器上也写了 gap: 10px，两者互不干扰。问题常出在变量名冲突：外层用了 --cols，内层也用 --cols，结果被覆盖。
嵌套场景下，CSS 变量必须按作用域隔离。比如内层卡片 Grid 应该用 --card-cols，而不是复用全局 --cols。
- 不要指望父级
gap“穿透”到子 Grid 内部项之间 - 调试时打开浏览器 DevTools 的 Grid Overlay，确认你看到的是哪一层的轨道线
- 如果嵌套后列数错乱，优先检查内层容器是否意外继承了外层的
grid-template-columns（比如通过all: unset或重置类）
实际项目里，auto-fit + minmax() 覆盖 80% 的响应式卡片需求，而 CSS 变量驱动的列数只在需要强约束的 UI 区域才值得引入。两者混合使用没问题，但别在一个容器里既写 repeat(auto-fit, ...) 又写 repeat(var(--cols), ...)——浏览器会忽略后者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
