3. 定义水槽与边距
水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以8px为最小单位进行推导，如S=8px、M=16px、L=24px、XL=32px、XXL=40px、…等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。
当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。
1. 自适应与响应式
1）自适应
自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是PC端、平板还是手机。
我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。
自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。
2）响应式
响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。
响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。
2. 栅格行为变化
1）固定栅格
将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。
固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显得不够协调。
