引入Divi 5的CSS网格

已发表: 2025-09-20

这是一个很大的。我们构建了最好的CSS网格构建器，今天可用于Divi 5。比Elementor好。比砖好。无论您是要掌握网格还是只使用Divi的新网格模板，您都会喜欢此更新。

查看以下视频以查看动作中的新功能。

每个人的CSS网格

Divi 5与前任相去甚远。我们一直在将Divi变成一个网络设计强大的功能，具有弹性箱，高级单元，预设和设计变量等新功能。 CSS网格是下一个向前迈出的一大步。

同时，我们不希望现有用户在新环境中感到迷失或埋葬。我们在为高级用户提供必要的工具的同时，使初学者可以访问网格布局之间达到了适当的平衡。

如果您从未听说过CSS电网，并且不想学习网格布局的来龙去脉，请不要担心 - 您不需要。享受新的预构建网格模板！

使用网格模板的优点在于，网格是在容器级别控制的，当您添加新项目时，它们会自动符合网格。它更加直观，并解锁了新的各种设计。

Divi在每种情况下都有网格模板，并且将它们应用于现有内容很容易。

如果您是经验丰富的CSS电网专家，Divi的网格选项不会阻止您。您可以直接到达点，手动定义您的列和行网模板，并使用“缩写编辑”创建各种网格布局，稍后我将介绍。

当然，您也可以放弃接口并使用自定义CSS面板应用网格规则；最适合您的东西。

如果您介于两者之间，那么Divi 5的网格构建器确实会发光。

我们将CSS网格参数转换为设置，以创建垂直或水平网格，自定义列和行尺寸，网格方向，元素对齐和理由等等。

此外，尺寸选项组包括新的列和行选项，使您可以调整单个网格项目在网格中的宽度，高度和位置。

Divi 5的网格构建器最独特的方面之一是偏移编辑器，您可以使用它在容器级别创建重复的非对称网格模式。让我给你一个现实世界的例子。

我使用Divi 5的Loop Builder在下面的视频中创建了一个博客模板；每列都是一个充满动态内容的循环项目。当我在父容器上启用网格布局样式时，列会自动符合网格。

我可以调整列的数量，输入自定义列或行模式，更改差距大小并执行许多其他操作。

此外，我可以使用oftsot编辑器将规则应用于网格中的特定项目。

我可以通过例如每4个项目跨越两个列，而不是在每行重复的标准列模式，而是从第二项和第三个项目开始。这些偏移模式使Divi 5的预制行模板种类繁多。

您可以使用前所未有的CSS网格创建壮观的布局。如果您想灵感，请查看我们的设计团队使用Divi 5的最新版本创建的这些令人惊叹的布局。

您可以免费下载它们并自己测试。

Divi 5的CSS网格今天可用，是今年即将到来Divi的许多功能之一。

您可以随着我们的进展，通过Divi 5及以后的最终版本，每两周更新一次。根据您的优先级，您现在可以使用Divi 5来构建新网站或等到我们添加更多功能，任何最适合您的功能。

如Divi 5的原始多相发布时间表中所述，Divi 5公共alpha就像“ Divi 5 Lite”。它缺少一些功能，并且可能不适合现有网站，但是如果您更喜欢Divi 4的体验，就可以在新网站上使用。

我们希望您尝试一下，如果您喜欢它，请使用它；当每个人都喜欢它时，我们将正式进行。

如果您错过了它，我们最近发布了新的自定义属性，该属性使您可以在元素和大多数子元素中添加任何属性，例如Alt，Title，Rel和Aria-Label。

Divi支持特定属性，例如类和ID，但是现在您可以将任何属性添加到任何元素中。这对于可访问性尤其重要，例如，您可以将Alt文本添加到图像中，并将角色和标签添加到非语义元素中，例如基于图标的按钮。

观看此视频以获取所有细节。