摘要：
栅格系统布局是一个很赞的思路，淘宝双飞翼和圣杯布局是其经典应用！此次重温后，自己对其又有了近一步的了解

上次提到淘宝双飞翼布局是2015年4月下旬的事情了，当时只是按照案例依葫芦画瓢了下，并没有对其深入。直到1个月前，艺灵入职一个新公司(2015.06.29号入职于杭州美源纺织旗下：怡君科技)，这才对栅格系统做了进一步的研究与了解。

小广告：杭州美源纺织旗下品牌“窝窝宝”是一个o2c模式的电商平台，主业是窗帘。公司的宗旨：一切为消费者着想，提供优质的服务且让消费者省钱省心是我们的义务和使命！

由于“窝窝宝”是一个新成立的电商平台，一切都是从零开始。包括网站搭建、运营、推广等等。而艺灵的工作就是负责前端这一块儿，制作网页并让其上线。

“窝窝宝”于2015年8月22号正式上线，在艺灵入职的这两个月中，陪着经理一起加了很多个夜班。虽然付出了很多私人时间，但也收获很多。最大的收获就是：又写了大量的jquery特效和css代码，在以后需要用到时可以顺手拈来使用了

此次网页制作中，艺灵在布局上面犹豫了很久。如何用最少的css实现更加灵活的布局是一个难题！最终，艺灵决定使用圣杯布局，因为这个栅格化布局可以在不改变html页面结构的情况下实现近百种页面布局！不得不说圣杯布局是一个非常赞的想法，再次感谢国外大大们脑洞大开的想像及付诸实践。

什么是栅格化布局

简单点说就是：像ps中的参考线一样，用若干水平参考线和垂直参考线将画布(网页)分割成若干份以便于布局排版。当然这个水平参考线和垂直参考线并不是随便拉的而是有规律的。(如果想知详细信息，请自行谷百搜索。)

标准的栅格化公式 (摘自谷百搜索)

W = c * n + g * (n - 1) + 2 * m

通常情况下，我们将元素的总宽度标记为W，column(每纵列)的宽度标识为c，gutter(列与列间)的宽度标记为g，margin(外边距)的宽度标记为m，column(每纵列)的个数标记为n。由于gutter宽度是margin的两倍，上面公式可简化为：W = c * n + g * (n - 1) + g ，进一步简化为：W= (c + g) * n，配图： 我们再来套下上面的公式，图中等宽的c为8列，列间距g也是8个，所以总宽度W=(c+g)*8。看似是对的，但在实际应用中，这个公式并不成立。为什么这样说呢，因为在实际操作过程中，我们会省略掉最左边和最右边的那两个外边距，也就是说w1的宽度才是总宽度。此时c的列数会比g的列数多1，新公式：w1=c*n + g * (n-1)，化简后：w1=(c + g) * n - g

有了栅格化公式后具体该怎么应用呢？我们通过实例来进行练手。

栅格布局实例练习

题一：一个宽度为990的盒子里面有两列布局，侧内容区宽度为190，间距10px，主内容区自适应宽度，如图： 用div+css实现图中布局。

看完题后不要急着写代码，要先理清下思路并给出几套方案，然后从这些方案中选择一个最优的方案。我们先来看下传统的方法。

方案一：浮动布局。
思路分析：主内容区.col-main左浮，右间距设置为10px，右侧边col-sub直接右浮。

css样式

<style type="text/css">
/*页面简单重构*/
*{margin:0;padding:0}
.clearfix{*zoom:1}
.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
/*两列布局*/
.col{width:990px;margin:0 auto}
.col-main{float:left;background:#666;margin-right:10px}
.col-sub{float:right;width:190px;background:#ccc}
</style>

html代码

<div class="col clearfix">
　<div class="col-main">主内容区col-main</div>
　<div class="col-sub">侧栏col-sub 宽190</div>
</div>demo1

上面的代码确实是实现了我们的需求，如果现在修改下需求：.col的宽度调整为1190px，.col-main(主内容区)自适应宽度且在右侧，.col-sub侧栏在左侧，中间间距不变。效果图如下： 此时我们需要修改好几处css才能实现布局。如果需求再变动下，我们的css又需要量身定制了，这样十分麻烦。圣杯布局和淘宝双飞翼布局都可完美解决这一现象，个人喜欢后者。

实际上，淘宝双飞翼布局与圣杯布局有异曲同工之妙，淘宝双飞翼的做法是给原.col-main添加一个子级.main-wrap，利用外边距和负值来实现这一效果，还是来看下完整的案例代码吧。

方案二：淘宝双飞翼布局

css样式

<style type="text/css">
/*页面简单重构*/
*{margin:0;padding:0}
.clearfix{*zoom:1}
.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}
/*淘宝双飞翼布局之两列布局*/
.col-main{float:left;width:100%}
.main-wrap{background:#666;margin-right:200px}
.col-sub{float:right;width:190px;background:#ccc;margin-left:-190px}
</style>

html代码

<div class="col clearfix">
　<div class="col-main">
　　　<div class="main-wrap">主内容区col-main自适应宽度</div>
　</div>
　<div class="col-sub">侧栏col-sub 宽190</div>
</div>demo2

这样就实现了效果，但这个代码还需要完善，因为现在只是左主右侧，如果像上面的需求那样，这里还不能够满足。接下来是需要写一些css布局模板出来，这样可以随意切换布局了。

写模板与是有讲究的，为了尽可能减少代码且发挥代码最大的公用性，我们可以使用父级控制子级。每次布局结构不同时，我们只修改父级样式名就可以实现布局变换。这是一个很好的方法，但唯一的缺点就是这个父级如何命名才会清楚明了并且不容易混淆。

为了少走弯路，我们来看下淘宝在这方面是如何做的。在淘宝源码中可以看到有这些样式名：.grid-s5m0、.grid-m0s5、.grid-s5m0e5、.grid-s5e5m0、.grid-e5s5m0等。想必很多看官看到此时已经云里雾里了，如果艺灵上一张解说图的话，看官们理解起来就方便很多了。如图： 

回到前面的公式中，我们套用下公式可得出：190=(c+10)*n-10，化简后：200=(c+10)*n此时，c和n是未知的，所以可以有推算出几种组合(注意：n是正整数！)。例：c=190,n=1、c=90,n=2、c=40,n=4、c=30,n=5、c=15,n=8等。如果让c=30，此时父级样式名为：grid-c2-m0s5，如果让c=40，此时父级样式名为：grid-c2-m0s4。这个要看个人喜好了，反正艺灵现在习惯c=30。有了父级样式后，我们来改造下css样式即可实现灵活布局了。最后分享下艺灵写的一些布局模板，需要的看官自行下载。

栅格布局模板大全

46个两列栅格布局模板大全.zipdemo3

最后来张效果图：有了这些模板库后，当我们页面布局需要变动时直接修改父级class即可实现对应布局，是不是很赞！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2015-08-26/296.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。