真正能落地的12栅格系统必须用minmax(0,1fr)+媒体查询重置+grid-column:span n，三者缺一不可；repeat(12,1fr)因fr不感知gutter和内容撑开而失效。
直接用 repeat(12, 1fr) 会出问题——小屏下内容撑破、列宽忽大忽小、col-4 不等于 1/3 宽度，根本不是“标准栅格”。真正能落地的 12 栅格系统，必须用 minmax(0, 1fr) + 媒体查询显式重置 + grid-column: span N 控制跨度，三者缺一不可。
为什么 repeat(12, 1fr) 不是标准栅格的起点
fr 单位只按剩余空间分配，不感知 gutter、文字撑开、嵌套容器宽度变化。常见现象包括：
-
col-6在窄屏下实际宽度远超 50%，因为 6 条1fr轨道被强行撑开，导致横向滚动 - 加了
gap: 1rem后，12 列总宽 = 容器宽 + 11 × gap，直接溢出 - 子项写
grid-column: span 4，但父容器没定义 12 条轨道（比如只写了repeat(4, 1fr)），结果跨的是“不存在的线”，行为不可控
正确起点是：grid-template-columns: repeat(12, minmax(0, 1fr))——minmax(0, 1fr) 允许轨道收缩为 0，防止内容撑破，同时保留等分语义。
col-4 这类类名怎么对应到 Grid 跨度
它不靠 width 百分比，也不靠 JS 计算，而是靠 grid-column 的 span 逻辑映射：
-
col-4→grid-column: span 4（占 4 条轨道） -
col-8 offset-2→grid-column: 3 / span 8（从第 3 条线开始，跨 8 条） - 所有类名生效的前提：父容器必须已定义至少 12 条列轨道（即
repeat(12, ...)） - 不要给子项设
width或flex，Grid 下 width 会被忽略，flex 会破坏网格项身份
响应式断点必须同步改三处，少一个就错位
移动端不是“只改列数”，而是整套轨道+区域+跨度规则重置。例如从桌面三栏切到手机单列：
- 改
grid-template-columns：从repeat(12, minmax(0, 1fr))→1fr - 改
grid-template-areas：从"header header header" "nav main aside" "footer footer footer"→"header" "nav" "main" "aside" "footer"（每行单词数严格匹配行数） - 改子项
grid-column：原来grid-column: span 4的卡片，在单列下应统一改为grid-column: 1 / -1或直接删掉（让它自动填满） - gap 值也要随断点调整：桌面用
gap: 1.5rem，手机用gap: 1rem，避免小屏间隙过大挤占内容
grid-template-areas 字符串写错，页面静默崩塌
它不报错，但浏览器会退化成普通文档流——元素堆成一列，DevTools 里看 grid-area 的 computed 值若为 auto，说明该元素根本没被识别为网格项。
- 每行引号内单词数必须和
grid-template-columns的列数一致：12 列布局，每行就得有 12 个词（可重复），如"header header header ..." - 大小写敏感：
grid-area: Sidebar和"sidebar"不匹配 - 拼错一个字母（
headeer）、多一个空格、少一个引号，整个字符串失效，且无 warning - 即使某区域要隐藏（如移动端侧栏），也得保留在字符串里，只是让它和主内容共用同一行，例如
"main main main"而不是删掉aside
最易被忽略的点：媒体查询里改 grid-template-areas，必须同时重写 grid-template-rows 和 grid-template-columns，否则浏览器按默认单行单列解析，布局直接塌陷。这不是“可选优化”，是 Grid 的语法硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
