Bricks Query Loop 三种三栏布局方案（Flexbox / CSS Grid / Masonry）

结构说明

在 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。把下面代码粘贴到容器的 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 的结构在循环项里，列数这种样式问题基本都在父容器上解决。