用CSS自定义属性（如--col-count）配合grid-template-columns:repeat()可动态控制网格列数，支持响应式和后台配置，但需注意IE不支持、变量须为整数、媒体查询中var()受限等限制。
用 --col-count 控制列数，配合 grid-template-columns: repeat()
直接在 CSS 中定义自定义属性（如 --col-count: 4），再用 grid-template-columns: repeat(var(--col-count), 1fr)，就能让列数随变量动态变化。这比硬写 repeat(4, 1fr) 更灵活，尤其适合后台配置列数或 A/B 测试场景。
注意点：
-
--col-count必须是整数，非数字值（如"4"字符串）会导致整个repeat()失效，浏览器会回退到默认单列 - 若需响应式列数（比如桌面 4 列、平板 2 列、手机 1 列），别只靠一个变量，应结合媒体查询覆盖：@media (max-width: 768px) { --col-count: 2; }
- IE 完全不支持 CSS 自定义属性，如需兼容，得用预处理器变量（Sass
$col-count）生成静态 CSS
用 --cell-padding 和 --gap-size 统一控制表格内距
把间距抽象成变量，能快速统一视觉节奏，也方便设计系统落地。例如设 --cell-padding: 12px，然后所有 .grid-cell 都用 padding: var(--cell-padding)；.grid-table 用 gap: var(--gap-size, 8px)，带 fallback 避免未定义时塌陷。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 在
border-collapse: collapse的传统<table>上改padding没用——它只对display: table-cell生效，而现代方案基本都用display: grid或flex - 把
--gap-size设为0后发现单元格紧贴，其实是gap不作用于第一行/列边缘，想控制外边距得额外加padding容器
用 --breakpoint-sm 替代固定像素断点
把断点值抽成变量（如 --breakpoint-sm: 600px），再在媒体查询里引用：@media (max-width: var(--breakpoint-sm))。好处是全局修改一处即可生效，避免散落各处的 600px、599px、601px 不一致。
但要注意：
- CSS 变量不能直接用于
@media查询条件（Chrome 119+ / Safari 16.4+ 才开始部分支持），目前绝大多数项目仍需 JS 注入或构建时替换 - 更稳妥的做法是：变量仅用于 JS 动态切换类名（如
is-mobile），CSS 写死断点，JS 根据matchMedia结果 toggle 类 - 别用
orientation: portrait当断点依据——折叠屏展开后仍是 portrait，但宽度已超 800px，样式错乱
用 --label-width 控制移动端卡片标签宽度
在卡片式布局中，td::before { content: attr(data-label); width: var(--label-width, 80px); } 能确保字段名左对齐区域统一，防止长标签挤占内容空间。这个变量特别适合多语言项目（中文“创建时间” vs 英文“Created At”长度差异大）。
实际踩坑：
-
width对伪元素默认无效，必须加display: inline-block或block - 若用
position: absolute布局标签，width会被忽略，此时得用min-width+left/right控制 - 没设
box-sizing: border-box时，padding和border会让总宽超预期，移动端卡片容易横向溢出
var(--xxx)，而是变量命名是否反映语义（比如 --col-min-width 比 --size-1 更易维护），以及变量作用域是否收敛——全局变量污染风险高，建议按组件作用域声明，例如 .responsive-table { --col-count: 3; }。 
