如何更改 Divi 博客模块中的列数

Divi 的博客模块可以以全角或网格布局显示博客文章。 如果选择网格布局，则最多可以拥有三列。 在本教程中，我们将探索将 CSS Grid 的强大功能与 Divi 博客模块相结合，以创建您想要的任意数量的列。 只需几个 CSS 片段，您的博客就会变成漂亮的多列网格布局。 此外，这些列将在所有浏览器尺寸下流畅响应，因此无需担心更新这些媒体查询或响应设置。 在 CSS Grid 魔术之后，您仍然可以使用内置的博客模块设置来直观地设计博客，而无需任何自定义 CSS。 因此，如果您正在为您的 Divi 博客寻找更多的专栏，这将起到作用，而且更多。

抢先看

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

这是一个代码笔，展示了我们将添加到博客模块中的 CSS 网格布局。

免费下载布局

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

下载文件

免费下载

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

下载

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

订阅我们的 Youtube 频道

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

单击导入按钮。

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

然后单击导入按钮。

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

让我们进入教程，好吗？

如何使用 CSS Grid 更改 Divi 博客模块中的列数

为什么选择 CSS 网格？

有很多方法可以使用 CSS 为博客模块制作列布局。 但是对于这种情况，使用 CSS Grid 是最有意义的。 CSS Grid 属性是一种流行的方式，只需几行 CSS，即可为内容创建可预测的响应式网格布局。 有了它，我们可以将所有博客模块卡片组织成一个完全响应的网格。 简而言之，它提供了一个简单而完整的解决方案，可以为您的 Divi 博客添加您想要的任何列布局。 事实上，我们还使用它为 Divi 模块构建了网格布局。

现在，让我们将注意力转向博客模块。

设置具有全角布局的博客模块

Divi 博客模块可用于在您网站的任何位置添加博客。 这使得在 Divi 中构建博客页面变得非常容易。 您需要做的就是使用 Divi Builder 将博客模块添加到页面。

对于本教程，我们将使用我们的一个免费布局包中的预制博客页面模板，该模板已经有一个带有一些基本样式的博客模块。 要将预制的博客页面布局加载到您的页面，请打开底部的设置菜单，然后打开从库中添加弹出窗口。 从那里，搜索并找到时尚设计博客页面布局并将其加载到页面。

加载布局后，找到用于显示博客文章的博客模块并打开博客模块设置。

设置帖子计数

在博客设置中，更新内容以将帖子数限制为 10。（这主要是出于审美原因，因为我们的网格最终会在桌面上包含两行五篇博文。）

• 帖子数：10

选择全角布局

由于我们将使用 CSS Grid 为我们的博客创建列布局，因此我们需要确保博客模块布局是全角的（而不是网格）。 这将确保博客文章按照文档/页面的正常顺序垂直堆叠。

要更改博客模块的布局，请打开博客模块设置，然后在设计选项卡下，打开布局下拉菜单并选择全宽。

现在每篇博文都应该跨越列（或父容器）的整个宽度。

只是为了好玩，让我们为博客文章添加一个边框，以便我们可以更好地了解添加 CSS 时网格布局的外观。 更新边框选项如下：

• 边框宽度：1px
• 边框颜色：rgba(150,104,70,0.35)

将自定义 CSS 类添加到博客模块

为了使用我们的 CSS 有效地针对这个特定的博客模块（没有其他），我们需要给我们的模块一个自定义的 CSS 类。 在高级选项卡下，添加以下 CSS 类：

• CSS 类：et-blog-css-grid

使用 CSS Grid 创建多列布局

现在我们的博客模块设置了全角布局，我们准备添加我们的自定义 CSS。 现在，我们将使用代码模块将 CSS 添加到页面中。 但是，当我们完成后，您始终可以将 CSS 移动到您喜欢的位置（例如主题选项中的自定义 CSS 或您的子主题的 style.css）。

在博客模块下添加一个新的代码模块。

在代码输入框中，添加必要的样式标签，以包装添加到页面的任何 CSS 代码。

在样式标签内，粘贴以下 CSS 片段：

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

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

显示：网格；

CSS 的第二行定义了网格的列模板。

网格模板列：重复（自动填充，最小最大（200px，1fr））；

第三行确定网格项目之间的间隙间距（如装订线宽度）。

间隙：20px；

CSS 网格列如何工作

在这种情况下，网格会根据需要重复添加列，以填满网格容器的剩余空间。 每列的最小宽度为 200px，最大宽度为 1fr（与 auto 完全相同）。 这意味着当父容器（Divi 行/列）的最大宽度为 1080 像素时，网格将有 5 列。 每列的宽度为 200 像素（最小宽度），等于 1000 像素。 添加 4 个 20px 的网格间隙，总共得到 1080px。 一旦视口将网格压缩到 1080 像素以下，CSS 网格的魔力就会接管并用博客文章填充每个可用空间，直到它们达到 200 像素宽度。 默认情况下，新行将在需要时自动创建。

要获得更多列，您可以将 200px minmax 值更改为更小的值，或者将 Divi 行的最大宽度增加到大于 1080px 的值。

这是一个演示我们在此处添加的 CSS 网格布局功能的代码笔。

至此，五列响应式网格已准备就绪。 事实上，你不打算为你的博客文章使用分页或边框，你可以在这里停下来。

这是迄今为止的结果。

设置博客帖子卡片（或网格项目）的样式

接下来，我们可以添加几行针对网格项目（或博客明信片）的 CSS，以便它们与每一行的顶部对齐并有一点填充。

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

从网格中删除分页

目前，如果您在博客模块上启用了分页，它将被视为 CSS 网格中的最后一个网格项。 要将分页完全从网格中移除，我们可以给它一个绝对位置并将其直接放在博客模块下。 为此，请添加以下 CSS：

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

现在分页链接安全地位于网格之外，因此它不会在不同的视口宽度上移动。

让我们看看到目前为止的结果！

额外提示：调整所有特色图像（或缩略图）的大小

此时，您可能会注意到每张博客明信片上的特色图片的高度不一致。 如果您想让它们都具有相同的高度，您也可以使用额外的 CSS 来做到这一点。

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

第一个片段以特色图像容器为目标，并添加了一个基本调整图像容器高度的填充百分比。 但是第一个片段在我们定位特色图像使其完全适合图像容器的中心之前不起作用。 为此，我们给图像一个绝对位置，并使用“object-fit:cover”使图像跨越容器的整个宽度和高度。

使用 56.25% 的顶部填充，我们应该为所有图像获得 16:9 的纵横比。

随意调整图像容器上的填充以获得图像所需的纵横比。

最后结果

这是我们添加到代码模块的整个 CSS 的另一个视图，并带有一些注释。

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

这是我们的博客模块的最后一次展示，其中包含我们的新列和网格布局。

最后的想法

使用 CSS Grid 只需几行 CSS 就能完成的事情总是让我感到惊讶。 在这种情况下，我们能够将整个 Divi 博客模块重组为流畅的五列布局。 最好的部分是您不必担心使用媒体查询！ 希望这可以节省您的时间，并为您提供更多选择来构建漂亮的博客页面。

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

干杯!