直接用 repeat(auto-fit, minmax()) + SCSS 变量可实现多数动态响应式网格，但页面级区域结构需 grid-template-areas 配合断点重定义；card-grid-cols() 函数封装提升可维护性；auto-fit 比 auto-fill 更安全；子元素禁设 width；grid-auto-rows 必须显式声明为 minmax(150px, auto)；grid-template-areas 实现语义化区域切换；Mixin 应封装意图而非坐标；二者组合保障结构韧性。
直接用 repeat(auto-fit, minmax()) + SCSS 变量就能撑起绝大多数动态响应式网格，不需要写一堆 @media；但真要控制页面级区域结构（比如侧边栏是否堆叠），就得靠 grid-template-areas 配合断点重定义。
用 card-grid-cols() 函数封装 minmax() 弹性列逻辑
硬写 repeat(auto-fit, minmax(280px, 1fr)) 看似简洁，但改最小宽度或最大单位时得全局搜替换。SCSS 函数能把它变成可配置的契约：
@function card-grid-cols($min: $card-min-width, $max: 1fr) { @return auto-fit, minmax($min, $max); }- 调用时只写
grid-template-columns: repeat(card-grid-cols(), 1fr);，改$card-min-width就全局生效 - 别用
auto-fill：它会预留空轨道，小屏下可能撑出不可见列，auto-fit才是“有内容才生成轨道”的安全选择 - 子元素别设
width：否则会卡死minmax()的弹性行为；用max-width或不设宽更稳妥
为什么 grid-auto-rows 必须显式声明
显式定义 grid-template-rows 只管“画好的格子”，但卡片数量动态增减时，Grid 会自动生成隐式行。没设 grid-auto-rows，这些行高度常塌缩成一条线，尤其图片加载慢或文字换行不一致时。
- 推荐写法：
grid-auto-rows: minmax(150px, auto)—— 保证每行有底线高度，又不限死内容伸展 - 别写
grid-auto-rows: 1fr：隐式行不参与fr分配，结果是空白+内容挤成一团 - 若需等高卡片，优先用
align-items: stretch，而不是靠grid-auto-rows填满
用 grid-template-areas 控制语义化区域切换
当你要在移动端把侧边栏从右侧移到主内容下方，或者让页脚跨全宽，靠调列数已不够——这时必须用命名区域，因为它是布局意图的直接表达：
立即学习“前端免费学习笔记（深入）”；
- 先在容器上定义：
grid-template-areas: "header header" "nav main" "footer footer" - 每个子项用
grid-area: nav对应，名字大小写必须完全一致 - 在
@media (max-width: 768px)里重写：grid-template-areas: "header" "nav" "main" "footer" - 注意：每行引号内列数必须一致，
"header"和"nav main"混用会整条规则失效
Mixin 封装要避开坐标数值陷阱
传 @include grid-cell(2, 4, 1, 3) 这种参数顺序没人能记住，而且一旦加个 header 行，所有行列号全得重算。真正该封装的是语义意图：
-
@include place-in-header→ 内部统一设grid-area: header或grid-row: 1; grid-column: 1 / -1 -
@include span-full-width→ 输出grid-column: 1 / -1，不硬编码列数 -
@include align-center-vertically→ 组合grid-row: 2 / 3+justify-self: center，而非只动 row 值 - 语义名即契约：改布局时只需调
Mixin内部实现，调用处零修改
最易被忽略的是 grid-auto-rows 和语义化 grid-template-areas 的组合使用——前者兜底动态内容高度，后者承载结构演进意图，两者缺一，响应式网格就只剩表皮弹性，没有结构韧性。
