CSS变量控制grid列数需在:root定义默认值并配合媒体查询，repeat(var(--cols),1fr)有效但minmax与变量不可共存，小程序不支持运行时修改:root变量，masonry布局中变量无效。
怎么用CSS变量动态控制grid-template-columns列数
直接写repeat(var(--cols), 1fr)就行，但必须配合:root定义和媒体查询或JS注入，否则变量无值。关键不是语法对不对，而是变量有没有被浏览器读到。
-
:root里定义默认值，比如--cols: 3；移动端可加@media (max-width: 750px) { :root { --cols: 2; } } - 不要在
.container里直接写style="--cols: 2"——WXSS（小程序）支持，但原生CSS不认内联变量声明 - Chrome/Safari 支持
var(--cols)，但IE、旧版Android WebView完全不解析，需 fallback - 变量名别带连字符，写
--col-count可以，但--column-count会被当成两个词（column和count）解析失败
grid-template-columns: repeat(...)里minmax()和1fr混用的坑
很多人想“最小宽度保底 + 剩余空间均分”，就写repeat(var(--cols), minmax(200px, 1fr))，结果发现列数固定了，根本没响应式效果——因为repeat(3, ...)是硬编码3列，var(--cols)只在repeat()第一个参数生效。
- 正确写法只有两种：
repeat(var(--cols), 1fr)（纯等分）或repeat(auto-fill, minmax(200px, 1fr))（自动计算列数） -
minmax(200px, 1fr)不能和var(--cols)共存于同一repeat()，否则1fr会失效，浏览器按minmax最小值撑开 - 如果既要固定列数又要最小宽度，只能用 JS 动态计算
calc((100% - gap * (n-1)) / n)然后设为grid-template-columns，CSS变量做不到
小程序里用setData改CSS变量为什么没反应
WXSS 不支持运行时修改:root变量，page.setData({ '--cols': 4 })只是往data里塞了个字段，不会触发样式重算。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 真正生效的方式：把变量写进
style属性，比如<view class="waterfall" style="grid-template-columns: repeat({{cols}}, 1fr)">，然后setData({ cols: 4 }) - 或者用
cssText动态插入<style>标签，但每次更新都会重排整个DOM，慎用 - 别在
app.wxss里定义:root变量指望全局生效——小程序没有全局CSS作用域，每个页面的:root是独立的
为什么grid-auto-flow: dense配var(--cols)还是不对齐
dense只是让短元素填空，不改变列高均衡逻辑。它和列数变量无关，但容易让人误以为“用了变量+dense就等于瀑布流”。
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-flow: dense必须搭配grid-row-end: span X才能体现高度差异，否则所有项都占1行，视觉上还是网格 - 列数变量只影响横向划分，
dense影响的是纵向填充顺序，两者不联动 - 真正按列高分配的
grid-template-rows: masonry目前仅 Chrome 116+/Edge 116+ 支持，且var(--cols)在masonry里无效，必须用grid-template-columns控制列数
实际项目里，变量控制列数最稳的路径就是：纯1fr等分 + gap + 媒体查询 fallback。想兼顾最小宽度和变量，就得切到 JS 计算列宽——CSS变量在这里能力边界很清晰，别硬扛。
