用容器和网格搭建布局

把区块放进容器,或放进网格的单元格,就能搭建卡片、分栏等布局,并作为一个整体来设置样式和移动。

容器和网格都是可以容纳其他区块的区块。容器把多个区块归在一个盒子里,您可以为它设置背景,并整体移动。网格则把区块排布在由行和列组成的表格中。这两种区块都在“区块”面板的布局分组里。

该用哪一个

  • 卡片、带彩色背景的面板,或需要放在一起的一组区块,请用容器。
  • 想让内容按等宽的列排列时,请用网格,比如并排展示三条简短的特色介绍。

两者都会给里面的区块留出各自的空间。如果您只是想让区块在页面上铺开,则两者都不需要:直接把它们放在板块中即可。

搭建容器

  1. 在“区块”面板的布局下找到容器。
  2. 把它拖进某个板块,放在想要的位置。空容器里会显示把区块拖到这里。
  3. 从“区块”面板拖一个区块到容器上。容器会出现蓝色轮廓,表示区块将放进它里面。
    一个文字区块正被拖到空容器上,容器以蓝色高亮显示
  4. 松开鼠标按钮。区块会出现在容器里,并占满容器的宽度。
  5. 用同样的方法添加更多区块。

您也可以把页面上已有的区块拖进容器,或把区块从容器中拖出来。容器里还可以放其他容器。在容器里移动和调整区块的方式,与在页面上完全相同。请参阅添加、移动和调整区块大小。

一个被选中的容器,背景为浅色,里面有一行文字和一个按钮
重要:删除容器会同时删除里面的所有区块。如果误删了,请点击顶部栏中的撤销。

更改容器的外观

  1. 点击容器本身,而不是里面的区块。比较好点的位置是两个区块之间的空白处。
  2. 在设置面板中,展开通用和外观。
    容器设置:“通用”下有内部布局、网格间距和对齐方式,“外观”下有背景色、边框颜色、圆角、内边距和最小高度

在通用下:

  • 内部布局决定区块如何排列。自由网格(12 列)让您像在板块里一样把区块放在任意位置。纵向堆叠会让区块一个接一个地向下排列。横向并排会让它们排成一行,放不下时自动换行。
  • 网格间距是区块之间的空隙。
  • 对齐方式决定当容器比里面的区块更高时,区块停靠在哪里:拉伸、顶部、居中或底部。

在外观下有:背景色、边框颜色、圆角、左右内边距和上下内边距(边缘与区块之间的空隙),以及最小高度。

注意:只有当内部布局为自由网格(12 列)时,才能把新区块拖进容器。要往纵向堆叠或横向并排的容器里放区块,请先切换为自由网格,放好区块后再切换回来。

搭建网格

  1. 把布局分组里的网格拖进某个板块。新网格有 3 列 2 行,以虚线单元格显示。
  2. 选中网格后,在设置面板中展开通用。用列数和行数来设置形状,两者都可以设为 1 到 8。
  3. 把区块拖到想要放置的单元格上。蓝色方框会显示它将落入的单元格。
    一个文字区块正被拖到网格的第三个单元格上,该单元格以蓝色高亮显示
  4. 松开鼠标按钮。
  5. 如果区块撑满了好几个单元格,请把它改成只占一个单元格的宽度。选中它,展开尺寸与位置,把占几列设为 1,或者把右边缘的手柄拖回单元格边缘。

新区块会保持它通常的宽度,上限是网格的列数,所以一开始往往会占满一整行。区块也可以有意跨越多个单元格,就像表格里合并的单元格:加宽或加高区块,就能覆盖网格中更多的位置。

一个三列两行的网格,第一行的每个单元格里有一行简短文字,第二行是空的

网格设置

  • 网格间距和对齐方式的作用与容器中相同。
  • 在外观下,您可以为整个网格设置背景色、边框颜色、圆角和内边距。单元格边框只会改变您在编辑器中看到的虚线单元格参考线的颜色。

在手机上,网格会折叠成单列,里面的区块按顺序依次堆叠,所以一行三列会变成上下排列的三个区块。

相关文章

Last updated 2026-10-03