注意：
其内容模块必须位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式设计的信息模块。
只要父级模块对齐栅格，子级元素可以不对齐列，同时子模块也可以有自己的栅格系统。
列宽无法永远精准整除，而相差的像素值往往是无法被用户以肉眼察觉的，栅格不是为了每一像素的精确，而是为了保证浏览效果的秩序、协调与统一。
确定列间距与大边距
列间距与大边距选择 8(最小单位)的倍数，网格将更加一致。可以将间距值把常用的数值整理成号码表，间距复用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…这样一来，保持一致性更加容易，更加合乎逻辑，并且开发人员也会高兴，因为他们可以根据屏幕元素之间的关系安全地假定间距。
注意：
列间距的数值越大，页面留白间隙越多
列间距的区域不可以放置内容模块，内容区从列间距开始到列间距结束
非常规设计时不需要栅格系统，根据设计场景可自定义。
栅格与适配栅格系统适配过程中需要考虑三个原则:等比缩放、弹性控件、文字流自适应。随着设备多样化，通用的适配方式是自适应与响应式布局，随之就是栅格系统的变化。我们先聊下断点。
断点，用浏览器打开一个网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。
断点设计主要考虑基础的 3 端，一般大于等于 1440 为 web 布局，1439-500 为平板布局，小于 500 为手机布局。每经过一个断点，可以改变栅格大小（比如 16 栅格改为 8 栅格），固定改为拉伸，样式（文字、颜色）。制作精良的话可以设计多个断点，如 480、600、840、960、1280、1440 和 1600px。
1. 栅格的行为固定栅格
固定网格的最大特征是在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。通过在嵌入式块中排列图块，在工具栏中放置图标等，可以用固定的框来形成网格。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。
首先通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格。
流动栅格
流动栅格是元素随着设备尺寸变化而比例变化，当到屏幕大小变化的断点时，列可以增长或收缩以适应可用空间，边缘元素被减掉。但并不是每一个断点都需要去减少元素，可以适当的按照元素的比例进行大小调整。流动布局兼容性高，能更好的适配多分辨率。
