在 Bricks 中将查询循环显示为三列布局

本教程提供可在 Bricks 编辑器内粘贴的构建器设置与 CSS 代码，用来创建一个三列的查询循环容器。我们在 在 Bricks 中集成自定义 SwiperJS 轮播 中也用到了查询循环，可见它用途很广。

结构说明

如你所见，我们把查询循环运行在一个 Div 元素上，这个 Div 被一个父级容器包裹——大部分 CSS 都会在需要时加在这个父容器上。Div 内部的元素与布局无关，仅用于演示。

Flexbox 原生方案

截至 Bricks 1.5 版本，Flexbox 是唯一被原生支持、且不需要任何额外 CSS 的方法。

Flexbox 工作良好，直到你需要处理每个条目之间的间距。我们必须创建一个 CSS calc() 函数，算出 Div 的正确宽度（在 flexbox 中称为 flex-basis），并减去它们分摊的间隙。在我们的示例中，使用 2rem 的 gap，你可以自由改成自己的值。

容器设置：

• 把 flex-wrap 设为 wrap
• 把 flex-direction 改为 row
• 同时添加列间距与行间距

Div 设置：

• 把 flex-grow 和 flex-shrink 都设为 1
• 把 flex-basis 设为：
  • 桌面端：calc(33.333% - calc(calc(2rem * 2)/3))
  • 平板端：calc(50% - calc(calc(2rem * 1)/2))
  • 移动端：100%

CSS Grid 方案一（需额外 CSS）

在处理卡片网格时，CSS Grid 可能是更合理的方案，不过它在 Bricks 1.5 版本中尚不被原生支持，因此我们需要添加一些额外 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);
   }
}

CSS Grid 方案二（用变量）

这个方法与第一个略有不同：我们用 CSS 变量来定义卡片之间的间距、每张卡片的最小宽度，以及在大屏上想要的最大列数。它的好处是——一旦设置好 CSS 变量，就不需要再写媒体查询来定义列何时堆叠，CSS 公式会自动帮你算好。

容器 CSS：

只需把下面的代码粘贴到容器的 CSS 标签页。如果你想更改间距、最大列数或卡片最小宽度，只需修改前 3 个 CSS 变量的值：

root {
   /* Set the following variables as you need */
   --grid-layout-gap: 2rem;
   --grid-column-count: 3;
   --grid-item--min-width: 280px;
   /* End of variables - Don't modify the following values */

   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));
   }
}

Column-count 瀑布流风格

如果你想要一种「伪」瀑布流（masonry）风格，有一个纯 CSS 的方案，使用 column-count 属性。

容器设置：

确保把容器设为 display: block，并在 CSS 字段中添加以下代码：

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;
   }
}

小结

在 Bricks 中给查询循环做三列布局有三条路：Flexbox（原生、需用 calc() 处理间距）、CSS Grid（语义清晰、需少量额外 CSS）、以及 column-count（纯 CSS 的伪瀑布流）。非开发者常卡在这一点，建议优先用方案二（CSS 变量版 Grid），它免写媒体查询、可随容器宽度自动堆叠。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程