其实分多少都行，看你的实际布局需求。但是常见的比较合理的是分12栏。
栅格系统的原理
假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N
W = c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：
W = (c+g) * N；把c+g记为C，得：
W = C * N
大部分的栅格系统都是此公式的变体。
用过Bootsrtap或者element-ui等ui框架都知道,每个ui框架里面 基本上都会自带有栅格化布局,
本文也会进行一个简单的栅格化布局的实现( 采用float方案 ), 希望对你们有所帮助
效果预览
1, html 中
嵌套结构, 外层为row, 里层为column
2, css 中
2.1 row行设置, 防止float: left带来的溢出
清除浮动, 并设置盒子模型为ie盒子模型, 这样row部分就设置好了
2.2 column 列设置 我这里是使用了24格的栅格化布局,
设置 float: left并定义初始宽度, 这里采用的是24格,所以一个的宽度是 24/100 = 1/x , 计算得出 x = 0.24 width: 4.166666666666667%
如果采用了scss或者其他css预编译器 就可使用里面的算术运算符进行计算了,
下面就算定义每一个column具体类目的宽度了
这样简单的栅格化布局其实已经好了, 那如何实现pc切换到移动端时候,响应式自动换行及变换宽高呢呢?
2.3 使用媒体查询, 当最大宽度大于800的时候, 我的列的类目,就呈现两倍放大
这样一个响应式的栅格化布局就写好了,
