用容器和网格搭建布局
把区块放进容器,或放进网格的单元格,就能搭建卡片、分栏等布局,并作为一个整体来设置样式和移动。
容器和网格都是可以容纳其他区块的区块。容器把多个区块归在一个盒子里,您可以为它设置背景,并整体移动。网格则把区块排布在由行和列组成的表格中。这两种区块都在“区块”面板的布局分组里。
该用哪一个
- 卡片、带彩色背景的面板,或需要放在一起的一组区块,请用容器。
- 想让内容按等宽的列排列时,请用网格,比如并排展示三条简短的特色介绍。
两者都会给里面的区块留出各自的空间。如果您只是想让区块在页面上铺开,则两者都不需要:直接把它们放在板块中即可。
搭建容器
- 在“区块”面板的布局下找到容器。
- 把它拖进某个板块,放在想要的位置。空容器里会显示把区块拖到这里。
- 从“区块”面板拖一个区块到容器上。容器会出现蓝色轮廓,表示区块将放进它里面。

- 松开鼠标按钮。区块会出现在容器里,并占满容器的宽度。
- 用同样的方法添加更多区块。
您也可以把页面上已有的区块拖进容器,或把区块从容器中拖出来。容器里还可以放其他容器。在容器里移动和调整区块的方式,与在页面上完全相同。请参阅添加、移动和调整区块大小。

重要:删除容器会同时删除里面的所有区块。如果误删了,请点击顶部栏中的撤销。
更改容器的外观
- 点击容器本身,而不是里面的区块。比较好点的位置是两个区块之间的空白处。
- 在设置面板中,展开通用和外观。

在通用下:
- 内部布局决定区块如何排列。自由网格(12 列)让您像在板块里一样把区块放在任意位置。纵向堆叠会让区块一个接一个地向下排列。横向并排会让它们排成一行,放不下时自动换行。
- 网格间距是区块之间的空隙。
- 对齐方式决定当容器比里面的区块更高时,区块停靠在哪里:拉伸、顶部、居中或底部。
在外观下有:背景色、边框颜色、圆角、左右内边距和上下内边距(边缘与区块之间的空隙),以及最小高度。
注意:只有当内部布局为自由网格(12 列)时,才能把新区块拖进容器。要往纵向堆叠或横向并排的容器里放区块,请先切换为自由网格,放好区块后再切换回来。
搭建网格
- 把布局分组里的网格拖进某个板块。新网格有 3 列 2 行,以虚线单元格显示。
- 选中网格后,在设置面板中展开通用。用列数和行数来设置形状,两者都可以设为 1 到 8。
- 把区块拖到想要放置的单元格上。蓝色方框会显示它将落入的单元格。

- 松开鼠标按钮。
- 如果区块撑满了好几个单元格,请把它改成只占一个单元格的宽度。选中它,展开尺寸与位置,把占几列设为 1,或者把右边缘的手柄拖回单元格边缘。
新区块会保持它通常的宽度,上限是网格的列数,所以一开始往往会占满一整行。区块也可以有意跨越多个单元格,就像表格里合并的单元格:加宽或加高区块,就能覆盖网格中更多的位置。

网格设置
- 网格间距和对齐方式的作用与容器中相同。
- 在外观下,您可以为整个网格设置背景色、边框颜色、圆角和内边距。单元格边框只会改变您在编辑器中看到的虚线单元格参考线的颜色。
在手机上,网格会折叠成单列,里面的区块按顺序依次堆叠,所以一行三列会变成上下排列的三个区块。