结构说明
在 Bricks Facebook 群里，“Query Loop 怎么排成 3 列”是被反复问到的问题，对非开发者的确容易踩坑。Bricks 的构建器里拖一个查询循环出来，默认的布局往往不是自己想要的列数，改起来又不知道该动哪些设置。
先说结构：把 Query Loop 跑在一个 Div 元素上，外面套一个父级 Container，需要写 CSS 的时候大多加在父容器上。Div 内部的元素和布局无关，只是演示用——真正决定列数的是父容器的 CSS，不是循环项内部的结构。
下面四种方案，从最省事到最灵活，任选其一。推荐先看自己的需求：只想快点出效果就用 Flexbox，做正式的卡片网格用 CSS Grid 的变量写法，做杂志风瀑布流用 column-count。
方案一：Flexbox（原生支持）
从 Bricks 1.5 开始，Flexbox 是唯一原生支持、无需额外 CSS 的方法。它的优点是零代码、全图形化配置；痛点则是管理间距：Flexbox 不自动计算 gap 占位，得用 calc() 算出每个 Div 的正确宽度（flex-basis），否则三列加上间距后会换行错乱。
容器设置：
-
flex-wrap设为 wrap（允许换行） -
flex-direction设为 row（横向排列） -
同时添加列间距和行间距（gap）
Div 设置：
-
flex-grow和flex-shrink都设为 1 -
flex-basis按断点设置（示例间距为 2rem，可自行修改）：-
桌面端：
calc(33.333% - calc(calc(2rem * 2)/3)) -
平板：
calc(50% - calc(calc(2rem * 1)/2)) -
手机端：
100%
-
理解一下这条公式：三列时，总宽度减去两个间距（2rem × 2）再除以 3，就是每一列应占的宽度。平板两列时减去一个间距除以 2。手写这个公式容易算错，但好在 Bricks 的断点面板支持分别填写，配一次以后所有循环都能复用。
方案二：CSS Grid 第一种写法
做卡片网格，CSS Grid 其实是最合理的方案，只是 Bricks 1.5 时代还未原生支持 Grid，需要补一段 CSS。
2026-08-17 注：Bricks 2.x 起 Grid 已原生支持（容器布局直接选 Grid），此方案仅适用于仍跑老版本、或需要精细 grid 控制的场景。把下面代码粘贴到容器的 CSS 标签：
root {
display: grid;
grid-gap: 2rem;
}
@media screen and (min-width: 768px) {
root{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 992px) {
root{
grid-template-columns: repeat(3, 1fr);
}
}平板 2 列、桌面 3 列，用媒体查询控制堆叠断点。1fr 表示每列等分剩余空间，repeat(2, 1fr) 就是均分两列。这套写法直白易懂，缺点是要自己维护媒体查询断点，列数或间距一变就要改好几处。
方案三：CSS Grid 变量写法
第二种 Grid 写法和第一种略有不同：用 CSS 变量定义卡片间距、卡片最小宽度、大屏最大列数。好处是设好变量后不需要任何媒体查询——CSS 公式会自动计算何时堆叠、每列多宽。粘贴到容器 CSS 标签：
root {
/* 按需修改以下变量 */
--grid-layout-gap: 2rem;
--grid-column-count: 3;
--grid-item--min-width: 280px;
/* 变量到此为止 - 以下值不要改 */
display: grid;
grid-gap: var(--grid-layout-gap);
}
@media screen and (min-width: 768px) {
root {
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
}
}这套代码的精髓在最后一行：minmax(max(最小宽度, 计算宽度), 1fr) 让 Grid 在“最小宽度”和“最大列数”之间自动权衡——屏幕够宽就排满三列，不够宽就自动减列，配合 auto-fill 实现真正的响应式，不用手动写一堆断点。想改间距、列数或最小宽度，只需改前三个变量，维护成本最低，强烈推荐。
相关阅读：
方案四：column-count 瀑布流
想要“伪瀑布流”效果（卡片高度不一、纵向错落），可以用纯 CSS 的 column-count 属性。先把容器设为 display: block，再加：
root {
column-count: 1;
gap: 2rem;
}
root > div {
break-inside: avoid-column;
}
@media screen and (min-width: 768px) {
root{
column-count: 2;
}
}
@media screen and (min-width: 992px) {
root{
column-count: 3;
}
}注意给每个子项加 break-inside: avoid-column，避免卡片被从中间截断。这种方案是“伪”瀑布流：内容按列纵向填充，不是 JS 瀑布流那样按高度智能分配，但胜在零依赖、纯 CSS，效果已经能满足大多数场景。
小结：追求零 CSS 用 Flexbox；卡片网格追求整洁、好维护用 CSS Grid 变量写法（推荐）；瀑布流用 column-count。四种方案都能在 Bricks 里实现 Query Loop 三栏布局，按项目需求选即可。布局类问题记得先分清“结构”和“样式”——Query Loop 的结构在循环项里，列数这种样式问题基本都在父容器上解决。
四种方案怎么选
快速决策：零 CSS 诉求、要最省事 → Flexbox 原生；卡片网格要整齐、好维护、响应式可控 → CSS Grid 变量写法（推荐）；想要瀑布流错落感且零依赖 → column-count；要真正的按高度智能排布 → 上 Isotope/Masonry JS 库（代价是多引一个库、注意重排时机）。常踩的误区是去循环项内部改结构想调列数——列数是父容器的样式，动父容器 CSS 才有效。响应式上 Grid 用 repeat(auto-fill, minmax(...)) 一行就能搞定多断点列数。
常见问题（FAQ）
Q：调列数为什么改循环项没用？
A：列数由父容器的 CSS 决定，不在循环项内部结构里，要改父容器。
Q：三种方案哪个最省事？
A：不想写 CSS 用 Flexbox 原生；想要整齐好维护用 CSS Grid 变量写法。
Q：column-count 是真瀑布流吗？
A：不是，它是按列纵向填充的「伪」瀑布流，胜在零依赖纯 CSS。
Q：想要智能按高度排布怎么办？
A：上 Isotope/Masonry 这类 JS 库，但要注意容器显示后再触发布局。
延伸阅读
- 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
- 相关阅读：Bricks Query Loop Api Data
延伸阅读
在 Bricks 中将查询循环显示为三列布局
教程：在 Bricks 中用 Flexbox、CSS Grid 与 column-count 三种方式把查询循环容器排成三列，含可直接粘贴的 CSS 代码。
tutorialBricks CSS Grid 布局完全指南：grid-template 与可视化栅格构建器（Visual Grid Builder）
教程：从 Bricks 1.6.1 起，任意布局元素都能用 CSS Grid 做二维布局。本文讲清 Grid Container / Grid Item、grid-template-columns/rows、fr 单位、implicit grid、minmax、auto-fill/auto-fit、repeat，以及 Visual Grid Builder 的可视化拖拽、断点与查询循环支持。
tutorialBricks Layout 布局详解——Section / Container / Block / Div 四件套与 Flexbox
教程：Bricks 的四种布局元素 Section、Container、Block、Div 各用在哪？Flexbox 的换行、方向、对齐、间距怎么设？一篇理顺。
tutorial在 Bricks 中创建可变宽度的全宽网格布局
教程：在 Bricks 中用 CSS Grid 命名区域实现 700px 居中正文 + 宽/更宽/全宽/侧栏多档可变宽度布局，含完整 CSS 与 PHP 代码。