$grid-columns 默认为 12 是兼顾整除性与实用性的折中选择：可被 1、2、3、4、6、12 整除，支持 span 3/4/6 等常见等分；8 栏无法三等分，24 栏导致类名冗长、css 膨胀。
为什么 $grid-columns 默认是 12？不是 24 或 8
12 是兼顾整除性与实用性的折中选择：它能被 1、2、3、4、6、12 整除，意味着写 span 4（占 1/3）、span 6（占 1/2）、span 3（占 1/4）都无需小数或四舍五入。换成 8 栏，就无法干净表达「三等分」；换成 24 栏，类名膨胀（.col-24-5 这种），编译后 CSS 体积明显增加，且多数项目用不到那么细的切分。
实操建议：
- 别硬改
$grid-columns去适配设计稿像素数——栅格是逻辑划分，不是像素对齐工具 - 若真需 24 栏（比如复杂后台布局），可局部覆盖变量：
$grid-columns: 24;，但要同步检查所有span、offset的计算逻辑是否溢出 - 注意 sass 中除法在
calc()里必须显式写单位，比如width: calc(#{$grid-column-width} * 3 + #{$grid-gutter-width} * 2);
grid-column-start 和 @include make-col-ready() 的分工差异
前者是纯 CSS 属性，用于手动定位；后者是 Sass mixin，负责注入基础样式（如 box-sizing、padding、Float 清除）。很多人以为用了 @include make-col-ready() 就自动响应了，其实它只管“准备就绪”，不决定“占几格”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
@include make-col-ready()但没调用@include make-col(4)→ 元素宽度为 auto，不占栅格 - 直接写
grid-column-start: 2;却没关掉 flex/Grid 模式 → 和旧版 float 栅格冲突，布局错乱 - 在 IE10/11 下混用
grid-column和 float 栅格 → 浏览器忽略 grid 属性，但 float 又没生效（因make-col-ready()里清了 float）
响应式断点里 media-min-width 为什么不能直接写 768px
因为 Sass 中断点变量通常是带单位的数值（如 $grid-breakpoints: (sm: 576px, md: 768px)），而 @media (min-width: $grid-breakpoints.md) 在旧版 Sass（em 或 rem，硬写 768px 会导致媒体查询和字体缩放脱节。
正确做法：
- 始终通过 map-get 获取：
@media (min-width: map-get($grid-breakpoints, md)) - 若自定义断点，确保单位统一（全用
px或全用rem），避免map-get($breakpoints, lg) + 1px这类运算导致单位丢失 - IE 不支持
min-width媒体查询中的 calc()，所以map-get($breakpoints, md) + 0.02rem这种写法在 IE 下直接失效
为什么 @include make-container() 必须包裹在 @media 外层
容器宽度（max-width）是响应式核心，它必须随断点变化。如果把 @include make-container() 写在媒体查询内部，Sass 会为每个断点生成一套完整容器样式（含重复的 margin、padding），但实际只需要一套基础容器 + 断点覆盖。更关键的是，Sass 编译时无法跨媒体查询合并规则，导致最终 CSS 中出现大量冗余声明。
典型翻车场景：
- 在
@media (min-width: 768px)里调用@include make-container()→ 移动端容器无max-width，撑满全屏 - 多个断点重复 include → 编译后 CSS 出现 3 个
.container { margin-right: auto; }，虽不影响功能，但白占字节 - 容器内嵌套栅格时，外层容器未设
max-width，子列的百分比宽度会基于视口而非容器，响应失准
真正难处理的是嵌套栅格的上下文隔离——父容器的 max-width 和子栅格的 width 计算必须在同一作用域下推导，否则 span 6 在窄屏下可能算出负值。这点很少被文档提及，但调试时经常卡在这里。