直接改$column-count不生效，因bulma栅格类（如.is-16）由$grid-columns变量驱动生成，$column-count仅参与宽度计算；必须同步重定义$grid-columns并完整导入utilities、columns、components/grid等模块，否则类名缺失或响应式失效。
为什么直接改 $column-count 不生效？
Bulma 的栅格系统默认基于 12 列，但它的列数不是靠单一变量控制的——$column-count 只影响 .column 的基础宽度计算，而实际布局还依赖 $grid-columns（用于生成 .is-1 ~ .is-12 类）、$gap、以及媒体查询断点下的响应式逻辑。如果你只改了 $column-count 却没同步更新 $grid-columns，就会出现类名缺失（比如 .is-16 根本不存在）或宽度错乱。
- 必须同时重定义
$grid-columns（如设为16），否则 SASS 编译时不会生成对应类名 -
$column-count仅用于内部计算（如calc(100% / $column-count * $n)），不驱动类生成 - 所有断点（
$tablet,$desktop等）下的栅格类都依赖同一套$grid-columns值，无法按屏幕尺寸差异化列数
如何安全地扩展到 16 列并保留响应式行为？
最稳妥的方式是覆盖 Bulma 的栅格变量后重新 import 全部栅格模块，而不是只 import grid.sass —— 因为 grid.sass 本身不包含断点逻辑，它只生成桌面端类；真正的响应式类（如 .is-8-tablet）由 components/grid.sass 中的循环生成，且依赖全局断点变量。
- 在自定义入口文件（如
main.sass）顶部先定义：$grid-columns: 16;<br>$gap: 0.75rem;
- 然后完整 import：
@import "~bulma/sass/utilities/initial-variables.sass";<br>@import "~bulma/sass/utilities/functions.sass";<br>@import "your-custom-variables.sass"; // 含 $grid-columns<br>@import "~bulma/sass/grid/columns.sass";<br>@import "~bulma/sass/components/grid.sass";
- 避免只 import
columns.sass：它不生成.is-16-tablet这类类名，会导致响应式失效
用 is-flex + flex-grow 替代栅格是否更灵活？
当需求超出传统等分栅格（比如需要 3:5:4 比例、动态占位、或嵌套不对齐），硬改 Bulma 栅格反而增加维护成本。此时直接用 Bulma 的 Flex 工具类组合更轻量、更可控。
-
.is-flex容器内，子元素加.is-flex-grow-3/.is-flex-grow-5可实现非整除比例分配（Bulma 默认支持1–5，也可扩展） - 注意
is-flex-grow-N实际是设置flex: N 0 0，不参与 flex-basis 计算，适合纯比例场景 - 若需精确百分比（如 33.33%、66.66%），建议直接写内联 style 或局部 class：
style="flex: 0 0 33.33%"，避免污染全局栅格语义 - Flex 方案不依赖
$grid-columns，也不受 Bulma 断点类限制，可自由搭配.is-hidden-touch等显示控制
自定义列宽时容易忽略的 CSS 层级问题
Bulma 的 .column 默认有 margin-left: -0.75rem（负边距抵消 gap），当你新增列类（如 .is-13）时，如果未同步更新该 margin 计算逻辑，会导致最后一列换行或溢出。
- 检查
columns.sass中的@for $i from 1 through $grid-columns循环是否覆盖全部目标值 - 确认
.column的padding-left和容器的margin-left是否仍匹配新列数下的 gap 分布 - 浏览器 DevTools 中 inspect 元素，重点看 computed
width和margin-left是否为预期值（例如 16 列下.is-1应为6.25%，而非8.333%） - 移动端小屏下若列数过多（如 16 列），
.is-1-mobile宽度会极窄（6.25%），可能触发文字折行或内容挤压，需配合.is-full-mobile手动重置
Bulma 的栅格本质是 SASS 驱动的静态类生成器，所谓“自定义”其实是重新触发那一套生成逻辑——变量改得再细，漏掉一个 import 或断点依赖，就只剩一半效果。真正棘手的从来不是怎么写，而是哪些地方不能跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
