本文也会进行一个简单的栅格化布局的实现( 采用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的时候, 我的列的类目,就呈现两倍放大
这样一个响应式的栅格化布局就写好了,
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
其实分多少都行，看你的实际布局需求。但是常见的比较合理的是分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
大部分的栅格系统都是此公式的变体。
