Bricks Query Loop 布局切换器：网格/列表一键切换（无插件）
想不想让用户自己选 Query Loop 的展示布局（网格 vs 列表）？这篇教你不装插件、不引 JS 库、不复制内容（保护 SEO），只靠一点自定义代码实现布局切换器。
本文基于 BricksLabs 公开免费教程实译，代码完整可复用。原文：How to add a layout toggle on Query Loops in Bricks
核心思路
用 CSS 变量（--grid-column-count 等）控制容器布局，切换按钮通过 JS 改 class 来切换 grid / list 两种布局表现。内容只渲染一次，SEO 不受影响。
结构与 class
在 Query Loop 容器上方放切换按钮组，套用约定 class：
- 容器：
.loop-ctn-w-layout-toggles - 内部循环容器：
.query-container - 切换按钮：加
data-layout="grid"/data-layout="list" - 重要：默认激活的按钮加
.toggle-layout--activeclass
CSS 变量驱动布局
.loop-ctn-w-layout-toggles .query-container {
/* 按需要改以下变量 */
--grid-layout-gap: 3rem;
--grid-column-count: 4;
--grid-item--min-width: 280px;
/* 变量结束 - 以下不要改 */
display: grid;
grid-gap: var(--grid-layout-gap);
}
@media screen and (min-width: 768px) {
.loop-ctn-w-layout-toggles .query-container {
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
/* ... 依据变量计算列宽 ... */
}
}JS 切换逻辑
// DOM 加载后执行，避免阻塞渲染
window.addEventListener('DOMContentLoaded', () => {
// 选取所有带布局切换的容器
const containers = document.querySelectorAll('.loop-ctn-w-layout-toggles');
// 页面上没有则退出
if (containers.length < 1) return console.log('There is no container with layout toggles on this page. Double check you correctly added the .loop-ctn-w-layout-tog');JS 监听切换按钮点击，按 data-layout 切换容器的 grid / list 表现并维护 .toggle-layout--active 高亮。
小结
- 纯 CSS 变量 + 原生 JS，零依赖
- 内容单渲染，SEO 友好
- 适合博客/产品列表给用户自选浏览密度
延伸阅读
延伸阅读
Bricks 嵌套滑块做网格轮播：用 SplideJS 扩展实现多行多列
教程：在 Bricks 默认嵌套滑块(nested slider)里做出多行多列的网格轮播效果，用 SplideJS 的 grid 扩展实现，适合产品墙/案例墙展示。
tutorialBricks 用 IsotopeJS 做筛选（一）：入队库与基础初始化
教程：IsotopeJS 筛选系列第一篇——在 Bricks 里用 WordPress 原生入队 IsotopeJS（Bricks 内置库），配好 CSS 变量响应式列数与初始化脚本。
tutorialBricks Query Filters 分面搜索教程——无插件实现筛选、排序与实时搜索
教程：Bricks 内置的 Query Sort, Filter & Live Search 系统，用 8 种筛选元素给文章/产品/用户列表加分类筛选、价格区间、排序、每页条数、实时搜索与 AJAX 分页，全程不装插件。
tutorialBricks Query Loop 按日期字段条件输出元素（Pro 思路卡）
选题卡：在 Bricks Query Loop 里，只有当某个日期型自定义字段（如 event_date）大于当前时间时，才显示某个元素（如“即将开始”CTA）。思路+官方钩子，完整代码见 BricksLabs Pro。