您熟悉使用Divi ? 创建令人惊叹的网站吗？您可能应该知道网格布局是 Divi Builder 的核心功能。 通常，您首先创建一行，然后选择为该行创建多个列。 列到位后，您将在其中添加模块。 通过为这些模块添加更多网格，我们可以让事情走得更远。
在本教程中，我们将探索如何通过为具有单列的 Divi 模块创建 CSS 网格布局来扩展 Divi 的网格布局。 CSS 网格（使用CSS Flex ）非常流行，只需几行 CSS 即可为内容创建响应式网格。 然后我们可以组织我们所有的模块来响应。 将此视为可以添加到 Divi 列的模块的附加布局。 这里的好处是我们所有的嵌套模块都将具有相同的高度和宽度，而无需设置填充和高度值。
最终结果预览
在开始之前，让我们看看在本教程结束时您将能够实现什么。
为 Divi 模块创建自定义 CSS 网格布局
第 1 部分：将模块添加到 Divi 列
我们需要做的第一件事就是将我们的模块组织成网格布局。 我们将把我们想要使用的所有模块添加到我们的列中。 让我们首先为默认常规部分创建一个新的一列行。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始
创建模块
在这些列中，我们将添加文本模块。 然后我们将更改内容设置如下：
- 在段落文本上方添加 H2 标题
- 背景颜色：#444444
我们还将更新设计设置，如下所示：
- 文字字体：Poppins
- 文字颜色：浅色
- 选择标题文本下的 H2 选项卡
- 标题 2 字体样式：TT
- 填充：顶部 10%，底部 10%，左侧 10% 右侧 10%
注意：为了简单起见，我们将继续使用具有不同背景颜色的多个文本模块来显示每个模块之间的区别。
切换到图层视图并创建下一个文本模块，如下所示：
- 复制文本模块。
- 打开复制模块的文本设置。
- 更新背景颜色
- 背景颜色：#4c6085
您可以重复此过程以创建第三个文本模块，如下所示：
- 复制上一个文本模块。
- 打开复制模块的文本设置。
- 更新背景颜色
- 背景颜色：#39a0ed
我们将再次重复该过程以创建第四个文本模块，如下所示：
- 复制上一个文本模块。
- 打开复制模块的文本设置。
- 更新背景颜色
- 背景颜色：#13c4a3
要创建接下来的四个模块，请使用多选功能选择所有四个模块。 然后将模块复制粘贴到同一列中，共创建八个文本模块。
第 2 部分：让我们为模块创建 CSS 网格布局
现在我们所有的模块都添加了，让我们为它们创建一个网格。
行设置
对于这个例子，我们使用单列布局，以便我们可以在全角布局中显示我们的模块网格。 现在，我们需要更新行设置以确保行占据页面的整个宽度。 我们还需要去掉默认的装订线宽度，这样就不会向我们的模块添加额外的边距。
打开行设置并更新以下内容：
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
将 CSS 网格添加到列以构建模块的网格布局
这是教程中的一个重要步骤，它使用 CSS Grid 属性为模块创建布局。
为此，我们将在列中添加三行 CSS，这将确定我们模块的布局。
打开列设置，然后在高级选项卡下，将以下 CSS 粘贴到主元素中：
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
CSS 的第一行根据CSS 网格模块对内容（或模块）进行布局。
显示：网格
在 CSS 的第二行，我们将定义网格的列模板。 在这种情况下，我们的网格将有四列，宽度为 25%。
网格模板列：25% 25% 25% 25%
第三行提到将自动生成的行。 这意味着每行的高度将由行内内容（或模块）的垂直高度决定。
网格自动行：自动
在移动设备上调整网格布局
现在，我们还需要根据需要调整移动设备上的网格布局。
为此，我们只需要在平板电脑和移动设备上添加一些 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网格的项目可以使用网格模块上的内置编号系统进行定位。 网格上的每条线代表一个数字。 对于列，行号从 1 开始并水平继续。 每个行号位于每列的开头和结尾。 因此，对于我们的列结构，行号从第一列左侧的 1 开始，到第四列右侧的 5 结束。 而且，因为我们有三行，所以行的行号从第一行顶部的 1 开始，直到第三行底部的 4。
如果我们想改变一个模块（或网格项）在 CSS Grid 中的位置，我们可以设置定义我们希望某个模块在网格中放置的位置。 这样做将覆盖模块在网格中的默认位置。
对于这个例子，我们将把第一个文本模块移动到不同的位置。 为此，我们只需要在模块中添加两行 CSS。
打开第一个文本模块的设置并将以下自定义 CSS 粘贴到主元素：
grid-column: 2/4;grid-row: 2/3;
CSS 的第一行通过告诉模块从第 2 列开始并在第 4 列结束来定义模块的水平位置。
网格列：2/4
CSS 的第二行通过告诉模块从第 2 行开始并在第 3 行结束来垂直定义模块（或网格项）的位置。
网格行：2/3
对于平板电脑和手机显示，我们会将模块带回原来的位置。 这有助于将主标题保持在页面顶部。
因此，为此，选择主要元素的响应选项下的平板电脑选项卡并粘贴以下 CSS：
grid-column: auto;grid-row: auto;
现在模块的位置将回到网格项目的原始（自动）流程。
Let’s 继续使用此方法定位更多模块（或网格项）。
我们现在将第三个文本模块（现在位于顶行的第二列）放置在网格内的新设置位置。 这个新位置将从第 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 属性将内容对齐和对齐到中心。 我们需要将此代码段添加到每个模块中。 我们可以使用多选来选择 don’t 已经对主元素具有自定义 CSS 的所有模块（或网格项）（因为我们 don’t 想要覆盖具有自定义位置的那些模块）。 然后通过打开所选模块之一的设置来打开元素设置。 在“高级”选项卡下，将以下 CSS 粘贴到主元素上：
display:flex;flex-direction:column;align-items:center;justify-content:center;
现在，我们可以分别返回到其他三个模块（模块 #1、#3 和 #7），并添加相同的 CSS 片段以及用于在网格上为模块提供自定义位置的 CSS。 确保在桌面和平板电脑的现有 CSS 下添加 CSS 片段。
最后结果
这是我们到目前为止所做的事情。
您是否注意到模块（或网格项目）如何在不同的浏览器宽度上平滑调整以实现良好的响应式设计。
使用不同模块和设计的真实示例
如果你想看一个使用这个网格系统的真实例子，那么你可以使用不同的模块。 这是您可以使用该技术创建的内容。 这可在 Fitness Gym Layout Pack 上找到。
现在在你所有
在本教程中，我们一直致力于为 Divi 模块创建 CSS 网格布局。 虽然该过程确实依赖于一些自定义 CSS，但考虑到我们可以从中获得的强大结果，it’s 出人意料地没有那么多。 当需要更独特的 Divi 布局时，能够在列级别控制所有模块的布局非常好。 如果您是 CSS 上瘾者并想进一步深入研究，您应该查看此完整指南以考虑更多可能性。
我们会很高兴看到您在评论部分的成功。
