首先，设计你的删格.
你是要使用等宽的还是不等宽的网格列？要有多少列数？间隔和列的大小是多少？
当你回答了上面的问题你只能做出正确的网格计算。为了解决大家的困扰，我写了一篇。如果你正想学习设计一个删格系统可以读一下。
其次，你需要明确你的删格系统在不同视口的表现
当屏幕视口发生变化时你要实时重新计算列和间隔么？当间隔保持不变时，你要改变列的大小么？在明确的分界点上你要改变删格列的数量么？
你需要好好回答这些问题。在如何计算列宽和间隔宽上，这些会给你一些线索。在提到的那篇中我也写了这些要考虑的东西，你不确定这些问题的话可以参考下。
最后，你愿意在HTML里写删格类吗？.
当涉及到删格系统时，前端世界拆分出两个派系。
一派就是在HTML中写入删格类名（以Bootstrap和Foundation为代表）。我称这一派HTML删格系统。HTML像下面这样：
<div class="container">
<div class="row">
<div class="col-md-9">Content</div>
<div class="col-md-3">Sidebar</div>
</div>
</div>第二个派系主张在CSS中创建删格。我称之为CSS 删格系统。
CSS删格系统的HTML代码相比HTML删格系统的要简单一点。对于同样的页面你需要创建的标签也会少一点。同时，你也不需要记住这些删格类名是什么：
<div class="content-sidebar">
<div class="content"></div>
<div class="sidebar"></div>
</div>另一方面，CSS删格系统中的CSS更复杂。你需要仔细想清楚才能取得一个简单的解决方案（如果你从没创建过）。
我会选择什么？
许多前端大牛会选择CSS删格系统。我，也不例外，属于CSS删格派系（当然我不敢称自己是大牛）。
关于我为什么选择CSS删格系统而不是HTML删格系统，我写过，如果你感兴趣可以看下。我还写了，如果你有兴趣做个转换，这篇可以帮你从HTML删格系统迁移到CSS删格系统。 (这么多文章…