标准栅格起点不是repeat(12, 1fr)，而是repeat(12, minmax(0, 1fr))，因fr仅分配剩余空间、不感知gap/内容撑开/嵌套变化，易导致溢出、列宽失准及span失效。
直接用 repeat(12, 1fr) 写栅格，小屏下内容撑破、列宽忽大忽小、col-4 不等于 1/3 宽度——这不是标准栅格，是假的等分。
为什么 repeat(12, 1fr) 不能当起点
1fr 只按剩余空间分配，不感知 gap、文字撑开、嵌套容器宽度变化。结果就是：
- 加了
gap: 1rem后，12 列总宽 = 容器宽 + 11 ×gap→ 横向溢出 -
col-6在窄屏下实际宽度远超 50%，因为 6 条1fr轨道被强行撑开 - 子项写
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：每行引号内单词数必须和列数一致（12 列布局，每行就得有 12 个单词）；单列下每行一个单词 - 改子项
grid-column：原来grid-column: span 4的卡片，在单列下应统一改为grid-column: 1 / -1或直接删掉（让它自动填满） -
gap值也要随断点调整：桌面用gap: 1.5rem，手机用gap: 1rem，避免小屏间隙过大挤占内容
grid-template-areas 字符串写错，页面静默崩塌：不报错，但浏览器退化成普通文档流——元素堆成一列，DevTools 里看 grid-area 的 computed 值若为 auto，说明该元素根本没被识别为网格项。
gap 和 padding 怎么配合才不出错
Grid 的 gap 是列间/行间间距，但它不作用于容器边缘。所以真正的“gutter”需要组合使用：
- 容器外层加
padding（如padding: 0 15px），防止内容贴边 - 内部用
gap: 15px控制列与列之间的空隙 - 两者值最好一致（如都用
15px），否则视觉节奏断裂
别用旧式浮动方案里的负 margin 抵消 padding，Grid 下这招不仅多余，还会干扰 gap 计算和媒体查询断点行为。
