在 Bricks 中创建可变宽度的全宽网格布局

大家好，这里分享一个来自上个月项目的学习经验小教程。也许能帮到你们中的一些人，也许你还能进一步优化它。我的布局需求当然只是个示例，你可以按自己的意愿来搭建。Grid 的可能性是无穷的。玩转 grid 布局我强烈推荐 https://cssgrid-generator.netlify.app/ 。

• 我的需求是一个灵活的 content grid，最大宽度 700px 并居中（你也可以用 72ch 或你喜欢的任意宽度）。我希望它简单、灵活，方便日后添加组件 / 网格列或调整内容宽度。
• 正文主宽度应针对可读性优化（700px 不错，62 到 80ch 之间的值也行）。
• 第一档 breakout：围绕 700px 正文的样式盒。
• 第二档宽度：播客 / 干扰块等 section。
• 全宽：用于某些特殊 section。
• 侧栏（Aside）：用于目录等附加功能。
• 我希望 class 数量尽可能少。

网格代码

其中，我学会了如何命名 grid 区域（grid areas），这在后面会非常有用。你像洋葱一样一层层地把区域包在正文外围。

minmax 函数定义了最小宽度（移动端外侧留 1em 空白，其他情况为 0）。

「fr」表示「fraction（分数）」，是 CSS Grid 的弹性单位。一个 fraction 会填满可用空间且无间隙，数字前缀决定比例。所以像 grid-template-columns: 1fr 1fr 1fr 1fr; 会得到四个等宽列。如果改成 grid-template-columns: 1fr 0.5fr 0.5 1fr; 则会得到两个等宽宽列和两个宽度只有宽列一半的等宽列。

.contentgrid {
   display: grid;
   grid-template-columns: 
     [fullwidth-start] minmax(1em, 1fr)
      [wider-start]minmax(0, 0.5fr)
        [wide-start] minmax(0, 0.25fr)
         [main-start] minmax(0, 700px) [main-end]
        minmax(0, 0.25fr) [wide-end]
       minmax(0, 0.5fr) [wider-end]
      minmax(1em, 1fr) [fullwidth-end];
}

/* the * selector moves anything in the center column with 700px */
.contentgrid > * {
     grid-column: main;
}

.content--wide {
     grid-column: wide;
}

.content--wider {
     grid-column: wider;
}

.content--fullwidth {
     grid-column: fullwidth;
}

/* for placing sidebars or elements like a toc */
.content-aside--left {
     grid-column: 1 / 4;
}

你只需 4 个 class 就能获得完整的内容控制（如果你需要更多或更少宽度档位，或额外的右列，数量可增可减）。

如何免逐页加类

我是个懒人，非常讨厌重复劳动。所以我不想给每个新页面都手动加主类 .contentgrid。我们把下面这段代码添加到 functions.php 或你喜欢的代码编辑器里（我个人选 WPCodebox）来实现：

/*
 Add a class to the <main> tag
*/

add_filter( 'bricks/content/attributes', function( $attributes ) {
// Add 'data-is-header' HTML attribute to header with value 'y'
        $attributes['class'] = 'contentgrid';
        return $attributes;
     } 
);

这段代码给平时无法直接访问的 <main> 标签加上 .contentgrid 类，于是每个新内容都会自动居中，且最大宽度为 700px。关于用 WPCodebox 管理这类注入，可参考 在 Bricks 中使用 WPCodeBox 管理专属代码片段。

CodePen

这里有一个可以随意把玩的 CodePen：

https://codepen.io/defcon1702/pen/YzvpLOp

这个 grid 对你有用吗？你有什么改进想法？欢迎在评论区写下！

小结

用 CSS Grid 的命名线（[main-start]、[wide-start] 等）把内容区域像洋葱一样包起来，再用 .content--wide / .content--wider / .content--fullwidth 等少量 class 控制各档宽度，即可在 Bricks 中实现「700px 居中正文 + 多档可变宽」的全宽布局。配合 bricks/content/attributes 过滤器给 <main> 自动加类，新页面无需手动设置即可套用。

站长

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.

获取报价 →浏览全部教程