栅格系统布局

.col-xs-超小屏幕 手机 (<768px),
.col-sm-小屏幕 平板 (≥768px),
.col-md-中等屏幕
.col-lg-桌面显示器 (≥992px)(栅格参数)

什么是栅格系统
栅格系统英文为 Grid Systems，也有翻译为网格系统。

定义：运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。

网页栅格
包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布。
栅格基础七要素
最小单位

需要先定好界面的单位基础，后续内容元素和布局规则都是基于它整数倍递增。

网页端最小单位：10

移动端最小单位：3、4、5

列数/N

列数是界面总宽度设定好后，纵向等分成几列。

• 网页端：12列、24列（常用等分列数，当然不是固定的，需要根据自己的内容设定列数）

• 移动端：6列（常用等分列数）

• 

• 大列宽/L

把界面总宽度等分成几列，每一列的宽度即为大列宽。

• 计算公式：L = W / N

• 大列宽包含：列宽和水槽
  
  水槽/G

相邻两个列宽之间的间隔是水槽。

水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。水槽可以将内容更规范的区分开来。

列宽/C

把界面总宽度等分成列，相邻两列之间的间隔（水槽）减去后就是列宽。
转载链接：https://www.jianshu.com/p/956065291d53