返回到支持 内容和媒体 区块 设计区块 网格区块

网格区块

网格区块是其他区块的容器。它可以用于排列多个区块,以及调整容器内所有区块的颜色、文本样式、高度、宽度和位置。网格区块是组区块的形式之一。

添加网格区块

您可以创建新的空网格区块,也可将现有区块组合成网格。

添加新网格区块

要添加新的网格区块,请点击“+ 区块插入器”按钮,然后搜索“网格”。点击区块即可将其添加到文章或页面。您还可以使用键盘另起一行输入“/grid”,然后按“Enter”键快速添加新的网格区块

点击区块插入器并搜索“行”,然后点击行区块,将其插入编辑器。

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

添加网格区块后,点击“+ 区块插入器”图标即可开始在网格内添加区块。

将现有区块放入网格中

对于页面上已有的区块,您可以按照以下步骤将它们组合成一个网格区块

  1. 选择要分组在一起的区块。您可以通过以下方式选择多个区块:
    • 使用鼠标点击并选中区块。
    • 点击第一个区块,然后按住键盘上的“Shift”键并点击最后一个区块,即可选择第一个和最后一个区块之间的所有区块。
    • 列表视图下,点击第一个区块,然后按住键盘上的“Shift”键并点击最后一个区块,即可选择第一个和最后一个区块之间的所有区块。
  2. 在区块上方或下方显示的区块工具栏中,点击“”图标(显示为两个重叠的正方形),即可将这些区块添加到组区块中。
箭头指向区块工具栏中的“组”图标。
点击区块工具栏中的“组”图标,将现有区块分组在一起
  1. 在右侧边栏的组区块设置中,点击“网格”图标(显示为一个 2×2 的网格)。
右侧边栏中的组区块设置,显示组、行、堆栈和网格区块的图标,其中“网格区块”图标用橙色箭头标示并框出
点击组区块设置边栏中的“网格”图标

网格区块工具栏

点击区块后,界面上将出现一个选项工具栏:

网格区块工具栏。

工具栏中包含了以下网格区块选项:

网格区块设置

选择一个区块后,您会在右侧边栏中找到其他区块设置。如果您没有看到边栏,您可能需要点击右上角的设置图标以打开设置。这个图标看起来像两个宽窄不一的栏目拼在一个方框里面:

编辑器里的设置图标,其下有提示信息“设置”。
点击此“设置”图标,打开区块设置

网格区块包含以下区块设置:

转换为其他分组形式

网格区块可以转换为组区块行区块堆叠区块

区块设置边栏,突出显示网格区块,以及转换为组、行或堆叠区块的选项。

布局

在布局设置中,您可以根据列宽调整方式为自动调整还是手动调整大小来选择网格区块中的列数:

  • 选择“自动”将自动添加指定最小宽度的列,以适应区块。
  • 选择“手动”会自动将区块划分为您指定数量的列。

可以通过设置最小列宽来设定网格中的列数,也可以直接手动设置,类似于列区块

将段落区块等组成部分放入网格区块中时,您可以设定该部分应跨越的列数和行数。您可为每个部分调整这些尺寸,从而创建自定义的网格结构。

要编辑网格区块内某个部分的尺寸:

  1. 选择要编辑尺寸的特定部分。
  2. 在区块设置边栏中的“尺寸”下更改区块跨越的列数或行数。
网格区块内段落区块的尺寸设置。
网格区块内段落区块的列跨度和行跨度设置
区块设置边栏设为“自动”时的“布局”板块,显示网格区块中的最小列宽设为 12 rem。
选择“自动”时的布局设置
区块设置边栏设为“手动”时的“布局”板块,显示网格区块中的列数设为 3。
选择了“手动”时的布局设置

下面是一个网格区块示例,其中包含多个段落区块,其列跨度和行跨度各不相同:

位置

使用位置设置,您可以在“默认”和“置顶”之间进行选择:

  • 默认:滚动到页面的其他板块时,滚动过去的该区块将消失。
  • 置顶:即使滚过最初添加该区块的位置,该区块也会浮动在页面上并保持可见。在列表视图中,区块旁将显示一个钉子图标。

高级

如需了解更多相关信息,请访问我们关于高级设置的详细说明。

网格区块样式

在区块设置边栏中点击“样式”图标,访问区块的设计设置。“样式”图标是一个圆圈形状,圆圈的一半被填满:

箭头指向“样式”图标,点击该图标即可打开区块样式板块。
颜色、排版、尺寸和边框

在此处,您可以设置文本颜色、背景颜色、文本大小和字体、内边距、边距和区块间距。请参考下列指南,了解有关如何使用这些设置的更多详情:

背景图像

与所有组区块形式一样,在网格区块样式中,您可以设置要显示在区块内容后的图片。如需获取有关添加背景图像的分步说明,请参阅组区块指南。

将区块从网格中移除

如果您想移除某个网格区块,但不想清除其内部区块,则您可以取消区块分组。按照以下步骤操作:

  1. 在编辑屏幕的顶部选择列表视图
  2. 选择“网格区块”。
  3. 点击“网格区块”旁边的三个点
  4. 选择“取消分组”选项。
GIF,显示在区块工具栏中选择“取消分组”的操作。
Copied to clipboard!