直接用repeat(auto-fit, minmax(220px, 1fr))能实现真正灵活的响应式栅格，而repeat(12, 1fr)会导致小屏压缩溢出、无法适配内容尺寸、语义失真；需配合grid-column显式跨列、gap控制间距、媒体查询兜底窄屏单列。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))) 就能构建真正灵活、无需 JS、不依赖框架的栅格化布局组件——它不是“模拟 12 列”，而是让列数随容器宽度和内容最小宽度自动伸缩。
为什么不用 repeat(12, 1fr) 写死 12 列
写死 repeat(12, 1fr) 看似还原传统栅格语义，但实际带来三类问题：
- 小屏下强制 12 列会导致子项被极度压缩，哪怕内容只有一行文字也会溢出或换行错乱
- 无法响应内容真实尺寸——如果卡片内含固定宽图片或表单控件，
1fr均分反而破坏可用性 - 语义失真：所谓“12 列”本质是提供跨列能力（如
grid-column: span 4），不是列数本身必须为 12
真正需要的是可组合的轨道系统：auto-fit 让浏览器根据 minmax(220px, 1fr) 动态生成合适数量的列轨道，既保最小可用宽度，又充分利用空间。
grid-column 控制跨列比 class 命名更直接
不需要 col-4、col-md-6 这类 class，子项直接用 grid-column 定义占位逻辑：
-
grid-column: span 3→ 占当前行连续 3 列（最常用） -
grid-column: 2 / -1→ 从第 2 条线开始，到最后一列线结束（常用于右侧留白） -
grid-column: 1 / 7→ 明确起止线（适合与grid-template-areas配合）
注意：不要同时设 width 和 grid-column，后者会覆盖前者；也不要用 float 或 inline-block 混入 Grid 容器，会触发 display 计算降级。
间距必须用 gap，别碰 margin
gap 是 Grid 原生属性，解决的是“轨道间空隙”，不是“元素外边距”：
-
gap: 16px同时控制行距和列距，且不会塌陷、不干扰盒模型计算 - 给子项加
margin会导致：最后一行对不齐、换行后间隙翻倍、配合justify-content: space-between时左右不对称 - IE11 不支持
gap？现在基本不用考虑——若真遇到，用padding+box-sizing: border-box在子项内部模拟，而不是回退到负 margin 行布局
顺带一提：box-sizing: border-box 必须全局启用，否则 padding/border 会让 minmax() 计算失效，这是多数错位问题的根源。
移动端单列必须显式锁定，不能依赖“自动”
auto-fit 在窄屏下仍可能挤出两列——比如容器宽 320px，而 minmax(280px, 1fr) 会让浏览器尝试塞进两列，结果每列 160px，内容被压扁甚至触发横向滚动。
正确做法是加一层精准媒体查询：
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
这个断点值要和你的 minmax() 最小值对齐：若设 minmax(300px, 1fr)，就用 max-width: 300px；若设 220px，就用 440px（两列临界点）——别图省事写 480px 一刀切，否则在某些安卓小屏上仍会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
