Bricks CSS Grid 布局完全指南：grid-template 与可视化栅格构建器（Visual Grid Builder）

Bricks 从 1.6.1 起引入了 CSS Grid 支持，让你可以创建二维布局（同时控制列和行）；而 Bricks 默认使用的 Flexbox 是一维布局（只能沿列或行一个方向）。本文把官方两篇文档——CSS Grid Layout（手写属性）与 Visual Grid Builder（可视化拖拽）——合并讲解，帮你既懂底层语法，也会用可视化工具。

什么是 CSS Grid（与 Flexbox 的区别）

• Flexbox：一维布局模型，适合“一排”或“一列”的排列。
• CSS Grid：二维布局模型，同时定义列轨道和行轨道，适合卡片墙、仪表盘、复杂版式。

在 Bricks 里，二者并不互斥：容器用 Grid 定义二维骨架，内部子元素仍可各自用 Flex 做一维排列。

创建栅格布局：Grid Container 与 Grid Item

把任意布局元素（section、container、block、div）的 Display 值设为 grid，这个元素就变成你的 Grid Container（栅格容器）。

Grid 容器的每个直接子元素都是一个 Grid Item（栅格项），并带有额外的 Grid column 与 Grid row 设置，用来把它放到栅格中的具体位置。

在构建器里编辑 Grid 容器时，会出现一层栅格覆盖层标出各个单元格；点击那个四宫格的元素操作图标可以显示或隐藏覆盖层。

注意：默认情况下 Grid Item 是按行排列、占满容器宽度的——这本身还没发挥 CSS Grid 的真正威力，直到你开始定义列轨道。

显式栅格：设置列轨道与行轨道

创建好 Grid 容器后，通过容器上的 Grid template columns（grid-template-columns）与 Grid template rows（grid-template-rows）来定义列轨道和行轨道。

基础示例：

grid-template-columns: 200px 1fr 2fr;

grid-template-columns 的每一个值都创建一条列轨道。上面这个例子创建了一个三列栅格：

• 第 1 列固定宽 200px。
• 第 2 列是 1fr。
• 第 3 列是 2fr。

行轨道同理：

grid-template-rows: 100px 300px;

这显式定义了前两行：第 1 行高 100px，第 2 行高 300px。因为只显式定义了前两行的高度，第 2 行之后的任何行默认由内容高度决定——想改变这个行为，就要用到隐式栅格。

fr 弹性单位是怎么算的

fr 是“分数单位”（fractional unit），表示占据可用空间的若干份。

假设 Grid 容器宽 1100px（容器默认宽度）：

1. 先减去所有非 fr 的值和间距：减去第 1 列固定的 200px，剩余可用宽度为 900px。
2. 总共 3 个分数单位（第 2 列 1fr + 第 3 列 2fr）。
3. 所以 1fr = 900px / 3 = 300px。第 2 列就是 300px，第 3 列就是 600px。

隐式栅格（Implicit grid）

对于落在你显式定义范围之外的 Grid Item，Grid 容器会自动生成额外的（列和行）轨道，这叫隐式栅格（implicit grid）。你可以通过容器的 Grid auto columns（grid-auto-columns）与 Grid auto rows（grid-auto-rows）来定义这些隐式轨道的尺寸。

Min & max 轨道尺寸（minmax）

minmax() 函数用来设置轨道的最小和最大尺寸，接受两个参数：第一个是最小值，第二个是最大值。

grid-template-columns: repeat(3, minmax(200px, 1fr));

这会创建一个显式的三列栅格，每个 Grid Item 最小宽 200px、最大宽 1fr。

问题是：这种显式栅格不自适应。当视口宽度小于 600px（3 列 × 最小 200px）时会发生溢出，而且列数不会随断点自动调整。

auto-fill 与 auto-fit 关键字

用 auto-fill 或 auto-fit 关键字可以解决响应式问题，让你不用写媒体查询就能做出自适应栅格。

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

选哪个关键字取决于想要的行为：

• auto-fit：把 Grid Item 撑开以填满可用空间。
• auto-fill：不撑开（保留可用空间）。

Repeat 重复轨道

repeat() 函数用紧凑写法定义重复的轨道尺寸模式，接受两个参数：第一个是重复次数，第二个是轨道定义。

grid-template-columns: repeat(3, 1fr);

创建一个显式的三列等宽栅格。

grid-template-rows: 100px repeat(2, 1fr) 200px;

创建一个显式的四行栅格：第 1 行 100px、第 2 和第 3 行各 1fr、第 4 行 200px。

用线号放置 Grid Item

Grid 线标记着列轨道或行轨道的起点/终点，计数从 1 开始。你可以用这些线号把一个 Grid Item 放到栅格上。

Grid column 与 Grid row 设置对所有 Grid Item（Grid 容器的直接子元素）都可用。语法是：第一个值指定起始线号，后接一个斜杠 /，再跟第二个值指定结束线号。

例如把“Grid Item 2”设为跨两列两行：

• Grid column 设为 2 / 4：从第 2 列线开始、到第 4 列线结束。
• Grid row 设为 1 / 3：从第 1 行线开始、到第 3 行线结束。

等价地，也可以把 Grid column / Grid row 设为 span 2——span 关键字告诉栅格该 Item 应横跨几列或几行。

Visual Grid Builder 是什么

新的 Visual Grid Builder 让你可视化地设计和管理的栅格布局，凡是 display 设为 grid 的元素都能用。它可以：

• 调整栅格尺寸：修改列数和行数以适应设计。
• 缩放与移动元素：通过简单拖拽调整元素在栅格中的大小和位置。
• 查询循环支持：调整栅格里任意查询循环项。
• 断点支持：为不同断点创建不同栅格布局，保证响应式。
• 重命名元素：通过重命名元素更好地辨识布局。
• 编辑元素：悬停任意 Grid Item 并点击铅笔图标，即可在元素面板继续编辑。
• 重置选项：重置整个栅格或当前断点上的单个元素。
• 历史：用历史按钮在改动之间来回切换。
• 填充栅格（Fill grid）：一键用 Block 元素自动填充空白单元格。
• ID 与类层级：在元素 ID 或类层级上可视化设计你的栅格。

如何打开 Visual Grid Builder

先把栅格布局元素的 display 属性设为 grid。激活后，Visual Grid Builder 图标会出现在 grid 值旁边。

注意：批量编辑元素时，可视化栅格构建器（图标）不可用。

在 Visual Grid Builder 里给元素加样式

Visual Grid Builder 既能给单个静态元素、也能给查询循环中的元素加样式，具体方式取决于你是在类层级还是 ID 层级工作：

静态元素：

• ID 层级：缩放或移动静态元素时，改动会反映在 Grid Item 控件里，具体更新 Grid Column 与 Grid Row 属性——直接修改该元素的栅格定位。
• 类层级：如果你在类层级定义了栅格，缩放或移动元素会把改动作为自定义 CSS 保存，应用到主元素的 Custom CSS 控件。

查询循环元素：

• ID 或类层级：只要是查询循环内的元素，尺寸或位置的改动都会作为自定义 CSS 保存到主元素的 Custom CSS 控件，与你在 ID 还是类层级无关。

重要：不要改动自动生成的 CSS 样式，它们是维持布局完整性的关键。这些样式带有清晰的代码注释、很容易识别并保留。移动或缩放元素后，CSS 会自动更新为新值；如果你重置某个元素，自动生成的自定义 CSS 会被清除，元素回到原始状态。

Visual Grid Builder 的控件

栅格操作（Grid actions）：

• Reset（Grid）：重置当前所选断点的所有栅格样式。
• Breakpoints：不离开编辑器即可在多个断点间切换。
• History：撤销或重做。

栅格控件（Grid controls）：

• Columns and rows：调整栅格内的列数和行数。
• Gap：用任意合法 CSS 值（包括变量）修改栅格元素之间的间距。
• Use min/max：开关，把列或行尺寸设为 minmax(0, 1fr) 以获得更好灵活性。

打开 Visual Grid Builder 时，它会自动检测并调整列/行控件以匹配你已有的栅格配置。

栅格面板控件（Grid panel controls）：

• Individual Columns and rows：精确控制列和行的大小。
• Elements：编辑栅格内的元素。

尺寸会根据你的主元素设置自动计算，例如 repeat(3, 2fr) 会被转换为 2fr 2fr 2fr。你也可以用 1fr、300px、minmax(0, 1fr) 等任意合法值自定义。

单个元素控件（Single element controls）：

• Resize：点击并拖拽边框来缩放元素。
• Move：在元素内点击并拖拽来重新定位。
• Rename：点击元素标签重命名。
• Reset：在当前断点上重置该元素的所有样式。
• Edit：关闭 Visual Grid Builder，并在结构面板选中该元素继续编辑。

你还能看到每个元素的索引；如果元素属于查询循环，还会显示它在循环内的具体索引（从 0 开始）。

注意事项与延伸阅读

• 命名栅格区域（grid-template-areas）必须通过自定义 CSS 定义。
• 在查询循环内放置 Grid Item，最好用 nth-child 自定义 CSS。
• 本文是对 CSS Grid 的概览而非完整参考。

延伸学习资源（官方推荐）：

• A Complete Guide to CSS Grid（CSS-Tricks）
• learncssgrid.com（CSS Grid 综合概览）
• cssgrid.io（Wes Bos 的免费 CSS Grid 课程）

小结

CSS Grid 让 Bricks 从一维 Flex 迈向真正的二维布局：手写 grid-template-columns/rows、fr、minmax、repeat、auto-fill/auto-fit 就能精确控制轨道与跨列跨行；而 Visual Grid Builder 把这些属性变成了拖拽即可完成的视觉操作，还支持断点、查询循环与自动生成 CSS。配合《Bricks 全局类完全指南》用类承载栅格样式，再结合《Bricks 主题样式与 Style Manager 实战》，你可以搭出既灵活又统一的设计系统。

站长

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.

获取报价 →浏览全部教程