布局网格区块

使用布局网格区块，以对齐您网站上的内容。使用此区块，您可以定义响应式断点，这意味着您可以选择在桌面视图和移动视图的文章或页面上并排显示多少列。

布局网格提供网页内容的结构和对齐方式。其中包含许多通过查看设备确定的竖线（响应式断点）：

• 桌面设备显示 12 条网格线。
• 平板电脑设备显示 8 条网格线。
• 移动设备显示 4 条网格线。

在布局网格区块中，网格线组合形成列 (1-4)，您可以将内容放在这些列的其中一个。

在较小的设备上，桌面布局中的列通常分布在多行。当您切换至平板电脑或移动设备视图时，系统会自动启用这种网格布局，但您可直接更改网格值以覆盖网格布局。

响应式断点是高级主题。您仍可以放心使用布局网格区块，且网格将使用默认断点。

要添加布局网格区块，请点击 + 区块插入器图标，然后搜索“布局网格”。点击即可为文章或页面添加该区块。

如果您有支持插件的站点，请务必通过以下方式启用布局网格插件：“插件”→“安装插件”。

有关添加区块的详细说明，请点击此处查看。

当您首次添加布局网格区块时，系统会提示您选择列数：

您可以稍后在区块设置中更改此值。

网格中的每一列都可以包含其他区块。点击每一列的 + 区块插入器，然后搜索您想要添加的区块。

当您点击区块时，选项工具栏将显示：

布局网格区块的工具栏中提供以下选项：

• 更改区块类型或样式。
• 拖动区块。
• 上下移动区块。
• 更改区块的水平对齐或宽度。
• 桌面设备、平板电脑和移动设备的响应式断点。
• 更改区块的垂直对齐。
• 其他选项。

当您点击区块时，您将在右侧边栏中找到其他区块设置。如果您没有看到边栏，您可能需要点击右上角的 ⚙️（齿轮）图标，打开设置。

高级

通过“高级”选项卡，您可以在区块中添加 CSS 类，从而编写自定义 CSS 并根据需要设置区块的样式。

布局网格区块中每一列都有自己的设置，您可以更改背景颜色和填充。这只会影响已选择的单个列。

通常情况下，您可以调整布局网格中列的大小。但是，一行中每列的所有偏移和跨度的总和不得超过相应显示设备的可用网格线总数。

例如，在桌面设备（12 条网格线）上，三列布局中的单个列可以每列无偏移跨越 4 条网格线，或跨越 3 条网格线，每条网格线有 1 个偏移，或者一列跨越 10 条网格线，另外两列分别跨越 1 条网格线。

这将确保您的列不会重叠，有时可能意味着，如果您不先减少另一个位置的值，您将无法增加当前位置的偏移或跨度。

网格中每一列都有颜色选项。这些是拖动手柄，点击并向左或向右拖动，即可调整区块的大小。

通过在边栏的区块设置中直接更改偏移和跨度值，您也可以调整布局网格中列的大小。

使用拖动手柄时，系统会自动调整这些项。

考虑调整网格大小并调整列在移动设备和平板电脑设备上的显示方式时，请记住，单个列的所有偏移和跨度值的总和不应超过平板电脑设备显示 8 条网格线和移动设备显示 4 条网格线。

在以下示例中，我们将列的跨度设为 2，偏移设为 0，以分别在移动设备上显示 2 列，平板电脑上显示 4 列。