直接用 css grid 写大型页面易失控，因重复值、魔数、响应式断点不一致导致维护成本高；应通过语义化 sass @mixin 解耦布局意图与实现细节，统一管理断点、避免嵌套陷阱，并确保可读性与可维护性。
为什么直接用 CSS Grid 写大型页面会失控
大型页面里反复写 grid-template-rows、grid-template-columns，很快就会出现重复值、魔数、响应式断点不一致。比如某处写 1fr 2fr 1fr，另一处又写 1fr 2fr 1fr，但其中一组加了 minmax(0, 1fr)，结果行为不一致；再比如移动端要改成单列，却在 5 个组件里各自写了 @media (max-width: 768px) { grid-template-columns: 1fr; }，维护成本极高。
用 Sass @mixin 封装网格结构，核心是把「行/列的语义」和「实际尺寸规则」解耦。不是封装“怎么写 grid”，而是封装“什么场景该用哪套行列组合”。
如何设计可复用的 @mixin：命名即契约
别叫 grid-3col 或 responsive-grid 这类模糊名。命名必须体现用途和约束，例如：
-
@mixin layout-main-content-sidebar—— 明确表示主内容 + 侧边栏，且隐含“侧边栏固定宽、主内容自适应” -
@mixin grid-card-row($gap: 1rem)—— 表示卡片流式行布局，接受间距参数，内部用repeat(auto-fill, minmax(300px, 1fr))) -
@mixin grid-form-label-input—— 固定两列：左 label（120px）、右 input（1fr），不响应式，避免表单错位
关键点：@mixin 不该暴露原始 CSS Grid 值，而应暴露业务语义。传参只限必要变量（如 $gap、$sidebar-width），不传 $rows 或 $columns 字符串。
响应式网格不能靠堆 @media 块
在 mixin 内部硬编码多层 @media，会导致调用方无法覆盖或组合。正确做法是让 mixin 接收断点映射，用 @each 驱动：
@mixin grid-responsive-cols($breakpoints: (
mobile: 1fr,
tablet: repeat(2, 1fr),
desktop: repeat(3, 1fr)
)) {
display: grid;
grid-template-columns: map-get($breakpoints, mobile);
@each $breakpoint, $cols in $breakpoints {
@if $breakpoint != mobile {
@media (min-width: breakpoint-get($breakpoint)) {
grid-template-columns: $cols;
}
}
}
}
注意：breakpoint-get() 是你自定义的函数（返回对应断点像素值），不是 Sass 内置。这样调用时可以复用项目统一断点系统，也方便测试不同组合：
.dashboard-grid {
@include grid-responsive-cols((
mobile: 1fr,
tablet: 1fr 1fr,
desktop: 2fr 1fr 1fr
));
}
容易被忽略的陷阱：嵌套网格与 subgrid 兼容性
当在某个 grid item 里再用 @include 定义子网格，需明确是否依赖 subgrid。目前 Safari 16.4+、Chrome 119+ 支持，Firefox 仍实验性开启。若项目需兼容旧版，子网格必须独立于父容器的 track sizing —— 也就是不能写 grid-column: subgrid，而要用显式尺寸（如 minmax(0, 1fr)）模拟行为。
更实际的建议：对「需要严格对齐列宽」的复杂仪表盘，放弃嵌套，改用顶层统一定义列轨道（grid-template-columns），再用 grid-column-start 控制各区块起始位置。Sass mixin 可封装这类“轨道锚点”逻辑，例如：
@mixin dashboard-col($start, $span: 1) {
grid-column: #{$start} / span #{$span};
}
.header { @include dashboard-col(1, 4); }
.chart { @include dashboard-col(1, 2); }
.sidebar { @include dashboard-col(3, 2); }
这种写法不依赖 subgrid，所有浏览器表现一致，且列数变更时只需改顶层 grid-template-columns，其余自动对齐。
真正难的不是写出能跑的网格，而是让后续接手的人一眼看懂「这个区域为什么占两列」「那个间隙为什么是 1.5rem 而不是 1rem」——所有语义、约束、例外，都得沉淀在 mixin 名称、参数名和文档注释里，而不是藏在 CSS 声明堆里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
