应封装语义意图而非坐标数值，如place-in-header；用card-grid-cols函数实现响应式列数；显式设置grid-auto-rows保障动态内容行高稳定；边框类需用变量化nth-child精确剔除外边框。
直接封装 grid-row-start 这类坐标属性是错的
传 @include grid-cell(2, 4, 1, 3) 这种参数顺序没人能记住，改设计时所有调用点都要重算行列号。更危险的是它掩盖了 Grid 的轴向语义——grid-row-start 和 grid-column-end 不是“数字坐标”，而是“逻辑位置”。一旦容器结构变化（比如加了 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 内部实现，调用处零修改。
用 repeat(auto-fit, minmax()) 封装响应式卡片网格
写死 repeat(3, 1fr) 在移动端会撑破屏幕，而 repeat(auto-fit, minmax(280px, 1fr))) 才是真正响应式的解法。但把它直接写进 CSS 里，就失去了 SCSS 的变量控制力。
立即学习“前端免费学习笔记（深入）”；
推荐封装成函数：
@function card-grid-cols($min: $card-min-width, $max: 1fr) {
@return auto-fit, minmax($min, $max);
}
<p>.card-list {
display: grid;
gap: $card-gap;
grid-template-columns: repeat(card-grid-cols(), 1fr);
}这样改最小宽度只需动 $card-min-width 变量，全局生效；且 minmax(0, 1fr) 比纯 1fr 更安全——内容超宽时（如长链接、white-space: nowrap）能强制收缩，避免溢出。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
别漏掉 grid-auto-rows 的隐式行控制
显式定义 grid-template-rows 只管“画好的格子”，但项目数量动态时（比如商品列表），Grid 会自动生成隐式行。若没设 grid-auto-rows，这些行高度可能塌缩或不一致。
在 Mixin 中必须显式兜底：
- 用
grid-auto-rows: minmax(150px, auto)确保每行有最小高度 - 避免写
grid-auto-rows: 1fr—— 隐式行不参与fr分配，会导致意外空白 - 若需等高卡片，搭配
align-items: stretch，而非依赖grid-auto-rows填满
这个值容易被忽略，但它是动态内容网格稳定性的关键防线。
边框类生成要用 :nth-child 精确剔除外边框
用 Flex 实现 N 宫格时，靠 border-right 和 border-bottom 模拟网格线，但必须剔除最右列和最下列的边框，否则外框多出一像素。
SCSS 里得用双重循环精准控制：
@for $index from 1 to ($row * $column + 1) {
.a-grid__item:nth-child(#{$index}) {
@if ($hasBorder) { border-bottom: 1px solid #eee; }
}
}
@for $index from 1 to $column {
.a-grid__item:nth-child(#{$column}n + #{$index}) {
@if ($hasBorder) { border-right: 1px solid #eee; }
}
}注意：$column 必须是变量，不能写死；nth-child(#{$column}n + #{$index}) 才能正确选中每行最后一项。写成 nth-child(3n) 这种硬编码，在列数变化时立刻失效。
