Gantry 架构的模板可以非常容易的去改变模块的布局 ... 前台我们把两个模块分类放在了 feature-a 还有 feature-b 这两个位置上 .. 下面我们去看一下改变模块的布局 ...

回到管理后台 .. 打开 扩展 .. 模板管理 ... 打开 gantry 默认模板 ...

再打开 布局 这个选项卡 ... 在这个界面上，我们可以去改变不同区域上的模块的布局 ...

找到特性位置 ... 也就是 Feature 区域上的模块位置 ... 每个区域上都会有一组数字，从 1 到 6 ，表示在这个区域上的六个位置 ...

这个特性区域目前只使用了其中的两个位置，所以，你会看到 2 这个数字会加粗显示 ...

下面的 a 和 b 表示这个区域上的第一个模块，还有第二个模块各自占用的宽度 ... 现在是一半一半 ...

Gantry 架构的模板使用了网格系统，它会把页面宽度分成十二份 ... 十二份的一半就是 6 份，也就是目前在这个 feature 区域上的两个模块会各占用 6 份的宽度，也可以说是 6 个网格的宽度。

关于网络系统，你可以参考宁皓网的 《 用 960 网格系统布局网页 》 这个课程。

把鼠标放在布局图示上面，会显示 6 | 6 ，表示这两个模块，分别占用 6 个网格的宽度 ..

改变模块的布局，可以使用下面的这个 滑块 ... 按住它，然后左右移动 .. 比如我们想让左边的模块占用 4 个网格的宽度，右边的模块占用 8 个网格的宽度 ...

向左移动 .. 注意工具提示上的显示 ... 现在是 4 | 8 ，点击页面 右上方 的 保存 ...

回到 前台 ... 刷新 ... 你会看到模块的布局的变化 ... 左边的模块，也就是 feature-a 位置上的模块，会占用页面的 4 个网格宽度，右边的 feature-b 位置上的模块会占用 8 个网格的宽度 ..

强制位置

下面我们再去看一下强制位置 .. 强制位置就是强制显示空白的位置 ... 回到 gantry 模板的布局界面 ...

找到特性位置 ... 先点击启用 强制位置 ... 然后再后面再选择强制显示的位置的数量 ... 我们可以选择 3 ...

Positions 后面的一排数字现在只会显示到 3 ... 点击 3 这个数字 ...

下面的布局图示上会显示 a b c ，现在这三个字母就会分别表示 feature-a ，feature-b ，还有 feature-c 这三个位置 ...

目前只有 feature-a 和 feature-b 这两个位置上发布了模块 ... 调整一下布局 ... 我们让 feature-a 和 feature-b 各占用 3 个网格的宽度 ...

剩下的 6 个网络的宽度留给 feature-c ，我们现在并没有分配模块到 feature-c 这个位置上显示，但是因为我们现在使用了强制位置 ...

所以这个 feature-c 位置会作为空白的空间 ... 点击 保存 ...

回到前台 ... 刷新 ...

现在 feature-a 和 feature-b 这两个位置上的模块会各自占用 3 个网格，剩下的 6 个网格宽度会空出来。