css栅格化布局

参考资料：
淘宝UED栅格化模式研究
Bootstrap官网栅格化介绍
CSS3中calc的使用
LESS的使用
栅格化原理介绍

专业词汇说明：

a container
rows 一行
columns 一列
gutters (the space between columns) 两个column中间的间隙

web页面被分成了N行，具体效果图分析如下

可以得出计算公式：（gutter+column） N - gutter = 100%；*

为了消除每一行最后一个coliumn的margin-right的影响：

 .row .col:last-child{
      margin-right: 0 !important;
  }

|> 请看具体demo

还需注意的几个坑：

• calc兼容性极差：IE支持并不是太好
• calc使用的过程中width: calc( (100% + 20px) / 12 - 20px); 是对的 √
width: calc( (100%+20px)/12-20px);是错的 ×，因为运算符前后应该有空格。
• LESS中计算的时候不支持100%-20px之类的语句