栅格布局

栅格布局和行列布局类似,是将行划分成固定的12列,每一个布局空间可以占n列,最多只能占12列,也可以将行划分成m(m<=12)个布局空间,每个布局空间可以占k(k<=12)列,该行中的所有布局空间所占的列数之和不能超过12列,但是可以少于12列,这就是栅格布局。

1. 什么时候用栅格布局

栅格布局适用于内容是用户上传,无法预计大小的页面,栅格布局会自动填充满页面。

下图用的就是栅格布局,图片可以自动排放。如果不是栅格布局,你需要手动调整位置,如果重新上传一上图片,还得需要重新调整位置,而栅格布局的自适应会很好的解决这个问题。

2. 如何使用栅格布局

下图布局是使用栅格布局。

(1)在页面编辑界面,把鼠标放在元素上会显示蓝色部分,在蓝色部分内右键——列布局——转为栅格布局。

(2)进入文档流编辑页面,清空全部内容,根据使用者需求插入布局,如下图。注意:插入的布局选择列布局即图中红色框内。

插入布局后,使用者就可以在其内编辑内容。

例子:

插入布局并且在其内插入图片

发布页面后效果