如何为 Divi 模块创建 CSS 网格布局

对于那些已经熟悉在 Divi 中构建网站的人来说，创建自定义网格布局是 Divi Builder 的一个核心方面。 只需创建一行并从该行的多个内置列布局中进行选择。 一旦列布局就位，我们只需在每列中添加我们想要的内容/模块。 但是，如果我们想要为这些模块添加额外的网格布局怎么办？

在本教程中，我们将探索如何通过在单列中为 Divi 模块创建 CSS 网格布局来扩展 Divi 的网格布局。 CSS Grid 属性（与 CSS Flex 一起）是一种流行的方式，只需几行 CSS，即可为内容创建可预测和响应式的网格布局。 有了它，我们可以将一列中的所有模块组织成一个完全响应式的网格。 将其视为可以添加到任何 Divi 列的模块的附加网格布局。 但是这项技术的最好的事情之一是每个相邻的模块将具有相同的高度和宽度，而无需在每个模块上使用自定义填充或高度值来尝试这样做的所有麻烦。

也许最好我们直接进入并向您展示这是如何工作的。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

下面是使用 Fitness Gym Layout Pack 中不同模块和设计的相同技术的一瞥。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

为 Divi 模块创建自定义 CSS 网格布局

第 1 部分：将模块添加到 Divi 列

在我们将模块组织成网格布局之前，让我们首先将我们想要使用的所有模块添加到我们的列中。

首先，为 Divi Builder 中的默认常规部分创建一个新的单列行。

创建模块

在行的列内，添加一个新的文本模块。 然后更新模块的内容设置如下：

1. 在默认正文内容的段落文本上方添加 H2 标题
2. 背景颜色：#333333

然后更新设计设置如下：

1. 文字字体： Poppins
2. 文字颜色：浅
3. 选择标题文本下的 H2 选项卡
4. 标题 2 字体样式：TT
5. 填充：顶部 10%，底部 10%，左侧 10%，右侧 10%

注意：为简单起见，我们将坚持使用具有不同背景颜色的多个文本模块来显示每个模块之间的区别。 但是，正如我稍后将解释的，您可以使用您想要的任何模块组合（模糊模块、号召性用语模块、联系表单模块等）。

打开图层视图（可选）并创建下一个文本模块，如下所示：

1. 复制文本模块。
2. 打开复制模块的文本设置。
3. 更新背景颜色
   • 背景颜色：#4c6085

重复此过程以创建第三个文本模块，如下所示：

1. 复制之前的文本模块。
2. 打开复制模块的文本设置。
3. 更新背景颜色
   • 背景颜色：#39a0ed

再次重复此过程以创建第四个文本模块，如下所示：

1. 复制之前的文本模块。
2. 打开复制模块的文本设置。
3. 更新背景颜色
   • 背景颜色：#13c4a3

要创建接下来的四个模块，请使用多选功能选择所有四个模块。 然后复制并粘贴同一列中的模块以创建总共八个文本模块。

第 2 部分：为模块创建 CSS 网格布局

现在我们的模块已经就位，我们准备为这些模块创建我们的 CSS 网格。

行设置

在这个例子中，我们使用一列布局，以便我们可以以全角布局显示我们的模块网格。 因此，我们需要更新行设置以确保该行跨越页面的整个宽度。 我们还需要去掉默认的装订线宽度，这样就不会向我们的模块添加额外的边距。

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

将 CSS 网格添加到列以构建模块的网格布局

这是使用 CSS Grid 属性为模块创建布局的教程中的关键步骤。

为此，我们将向 Column 添加三行 CSS 来确定模块的布局。

打开列设置，然后在高级选项卡下，将以下 CSS 粘贴到主元素中：

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

CSS 的第一行根据 CSS 网格模块对内容（或模块）进行布局。

显示：网格

CSS的第二行定义了网格的列模板。 在这种情况下，网格将有四列，每列宽度为 25%（参见上面的屏幕截图）。

网格模板列：25% 25% 25% 25%

第三行 CSS 指定行将根据需要自动生成，并将大小（或高度）设置为 auto。 这意味着每行的高度将由行内内容（或模块）的垂直高度决定（见上面的截图）。

网格自动行：自动

在移动设备上调整网格布局

我们还需要根据需要调整移动设备上的网格布局。

为此，我们只需为每个平板电脑和移动设备添加额外的 CSS，即可更改列数和每列的宽度。

在此示例中，我们将平板电脑上模块的网格布局更改为两列，每列宽度为 50%。

打开响应式选项并选择主元素下的平板电脑选项卡并粘贴以下 CSS：

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

对于手机显示，我们需要单列布局。 要创建它，请将以下 CSS 粘贴到 Phone 选项卡 Main Element 下：

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

第 3 部分：对网格项（或模块）进行更改

向网格添加新模块及其反应

现在每个模块都在 CSS 网格内，添加一个新模块会将其他模块推到右侧并根据需要自动创建新行。

由于无论如何我们都需要一个用于此布局的模块，复制第一个文本模块以查看其他模块如何在网格内进行调整。

网格如何响应具有不同内容量的模块

现在，所有文本模块都具有相同数量的内容，因此很难看出网格布局如何处理具有不同数量内容的模块。 要了解其工作原理，请更改每个模块中的段落文本量。 请注意，模块将保持与同一行中内容最多的模块相同的高度。 并且行高也将由内容最多的模块（或垂直高度）决定。

更改模块（或网格项）的位置

CSS Grid 项目可以使用 grid 模块的内置行号系统进行定位。 网格上的每一行代表一个数字。 对于列，行号从 1 开始并水平继续。 每个行号位于每列的开头和结尾。 因此，对于我们的四列结构，行号从第一列左侧的 1 开始，到第四列右侧的 5 结束。 而且，由于我们有三行，行的行号从第一行顶部的 1 开始，一直到第三行底部的 4。

要更改 CSS Grid 中模块（或网格项）的位置，我们可以设置定义我们希望将某个模块放置在网格中的位置。 这将覆盖模块在网格中的默认位置。

在这个例子中，我们要将第一个文本模块移​​动到不同的位置。 为此，我们需要向模块添加两行 CSS。

打开第一个文本模块的设置并将以下自定义 CSS 粘贴到主元素：

grid-column: 2/4;
grid-row: 2/3;

CSS 的第一行通过告诉模块从第 2 列第 2 行开始到第 4 列结束来定义模块（或网格项）的水平位置。

网格列：2/4

CSS 的第二行通过告诉模块从第 2 行开始到第 3 行结束来定义模块（或网格项）的垂直位置。

网格行：2/3

对于平板电脑和手机显示，我们希望将模块带回原来的位置。 这有助于将主标题保持在页面顶部。

为此，请选择主要元素的响应选项下的平板电脑选项卡并粘贴以下 CSS：

grid-column: auto;
grid-row: auto;

现在模块的位置将回到网格项目的原始（自动）流程。

让我们继续使用此方法定位更多模块（或网格项）。

我们要将第三个文本模块（现在位于顶行的第二列）放置在网格内的新设置位置。 这个新位置将从第 1 列第 1 行开始，第 2 列结束，也从第 2 行开始，第 4 行结束。

为此，请打开第三个文本模块的设置并将以下自定义 CSS 粘贴到主元素：

grid-column: 1/2;
grid-row: 2/4;

现在我们可以通过为平板电脑添加以下 CSS 来将位置更改回移动设备：

grid-column: auto;
grid-row: auto;

对于我们最终的自定义模块网格放置，我们将把第七个文本模块（现在在第二行的最后一列）放置在网格内的新设置位置。 这个新位置将从第 4 列第 5 行开始，并从第 2 行开始，第 4 行结束。

为此，打开第七个文本模块的设置并将以下自定义 CSS 粘贴到主元素：

grid-column: 4/5;
grid-row: 2/4;

然后像我们在前面的模块中所做的那样，为平板电脑显示粘贴以下 CSS。

grid-column: auto;
grid-row: auto;

将模块（或网格项）内容居中对齐

我们可以停在那里，但我们会错过一个有用的方法来垂直对齐（或居中）我们的模块内容。 使模块（或网格项）内容垂直居中是网格布局的一个方便特性，因为它使所有内容更加对称和美观。

为此，我们可以添加一个 CSS 片段，该片段使用 flex CSS 属性将内容对齐并对齐到中心。 我们需要将此代码段添加到每个模块中。 为此，我们可以使用多选来选择所有还没有自定义 CSS 到主元素的模块（或网格项）（我们不想用自定义位置覆盖这些模块）。 然后通过打开所选模块之一的设置来打开元素设置。 在 Advanced 选项卡下，将以下 CSS 粘贴到 Main Element：

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

现在我们可以分别返回到我们的其他三个模块（模块 #1、#3 和 #7）并添加相同的 CSS 片段，以及用于为模块在网格上提供自定义位置的 CSS。 确保在桌面和平板电脑的现有 CSS 下添加 CSS 片段。

将 CSS 添加到第一个文本模块

将 CSS 添加到第三个文本模块

将 CSS 添加到第七个文本模块

最后结果

这是我们为文本模块定制的 CSS 网格布局的最终​​结果。

请注意模块（或网格项）如何在不同的浏览器宽度上平滑调整以获得良好的响应式设计。

使用不同模块和设计的示例

很难看到使用 CSS 网格仅使用文本模块创建模块布局的全部潜力。 所以我想我会向您展示我通过使用我们的 Fitness Gym Layout Pack 中的不同模块和设计元素应用本教程中的相同步骤创建的设计。

这里是…

我还将此布局与文本模块布局一起包含在本文开头的免费下载中。

随意拿它旋转！

最后的想法

在本教程中，我们向您展示了如何为 Divi 模块创建 CSS 网格布局。 尽管该过程确实依赖于一些自定义 CSS，但考虑到它可以产生的强大结果，令人惊讶的是它并没有那么多。 当需要更独特的 Divi 布局时，能够在列级别控制所有模块的布局真是太好了。 有关 CSS 网格的更多信息，您应该查看此完整指南以考虑更多可能性。

我期待在评论中收到您的来信。

干杯!