HTML瀑布流布局中用CSS变量控制列数怎么写-html教程-PHP中文网

css变量控制grid列数需在:root定义默认值并配合媒体查询，repeat(var(--cols),1fr)有效但minmax与变量不可共存，小程序不支持运行时修改:root变量，masonry布局中变量无效。

html瀑布流布局中用css变量控制列数怎么写

直接写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）解析失败

很多人想“最小宽度保底 + 剩余空间均分”，就写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变量做不到

WXSS 不支持运行时修改:root变量，page.setData({ '--cols': 4 })只是往data里塞了个字段，不会触发样式重算。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

真正生效的方式：把变量写进style属性，比如<view class="waterfall" style="grid-template-columns: repeat({{cols}}, 1fr)"></view>，然后setData({ cols: 4 })
或者用cssText动态插入<style></style>标签，但每次更新都会重排整个DOM，慎用
别在app.wxss里定义:root变量指望全局生效——小程序没有全局CSS作用域，每个页面的:root是独立的

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变量在这里能力边界很清晰，别硬扛。