流行的css布局设计有：固定布局（如960gs），流氏布局，响应式布局。它们都有自己的栅格系统。
固定布局：各部分的宽度固定，缩放页面到窗口宽度小于页面宽度时，导致部分内容不可见，出现滚动条滚动才行。 960gs是网页栅格系统中的最佳宽度，因为它可以分解为2的6次方乘以3和5，使得它可分割成26种宽度的整数倍，所以很灵活。950和960没实质区别，只是左右外边距设置不同。 栅格系统：列，槽，外边距。
960gs：设置左右两侧外边距10px；12列栅格的宽度恰好填满容器。960/12=80px,所以内容区为60px。
流式布局：百分比表示。直接container为100%。若需构建一个12列的流式栅格系统，列加槽宽为100%/12=8.333%(不是内容去的宽度)
响应式布局：响应式开发框架Foundation 5。响应式设计的栅格系统实际上是流式栅格系统的基础上添加了媒介查询。为了实现布局，我们。。去看github仓库的Task008算了，照片太大传不上。
注意：用container为960px做检验。我们的内容要有两个嵌套，，外层的（即col-md-4层），是得到的宽度为100%/n，如320px，那么，3个320px就站满了一行，看不出间距，不好。所以我们对外层设置box-sizing：border-box，这样，对于外层的border和padding的变化就不影响这个100%/n的大小了，我们对外层不设背景色，padding：10px，那么我们的内层（即inter层）设置背景色，边框颜色border以及高度。那么得到的内层是显示的，为外层左右减10px，此时两列之间间隔20px为白色显示。