css - 在实现非基于网格的设计时，CSS 网格系统如何节省时间？

Question

哪些 CSS 网格系统可以快速完成而我们没有它们就无法完成？

我使用各种资源从事自由元素，我得到的 Photoshop 文件 (PSD) 不是基于网格或不使用相同的网格宽度和列、装订线。我没有与设计师直接沟通。我只直接从客户或其他自由职业者/分包商那里获取设计文件。 我擅长为 PSD 制作 HTML CSS，无需使用任何网格，也兼容 IE。

如今，twitter bootstrap 在社区中很流行，它基于 940px 宽度的网格以及其他按钮和 jquery 插件。

我的问题专门针对使用网格。与通常的方法相比，它如何减少我们的开发时间而不限制我们的任何事情，特别是当设计人员位于远程位置并且我没有直接连接到他们时，甚至我不能强制他们使用任何基于网格的系统。有些客户要求我使用 twitter bootstrap，但他们给我的设计文件与 940px 网格不匹配。

Answer 1

如果您正在实现的设计不是基于布局网格，那么 CSS 网格系统根本无法帮助您。

我可能会在这里表现出我缺乏设计知识，但我的理解是布局网格指定了布局列的最小宽度，例如60px，以及装订线的宽度(列之间的水平空间)，例如20 像素。较大的列由最小列宽和装订线的倍数组成 - 例如4 跨度的柱子与四个单独的布局柱子和三个排水沟一样宽。

这是一种使不同列数的布局看起来彼此一致的方法。

CSS 网格系统在 CSS 中为您实现了这一点，因此您无需编写任何 CSS。

• 例如http://twitter.github.com/bootstrap/scaffolding.html#grid-system

您只需将类应用于 HTML 元素。对于 Twitter Bootstrap 的 CSS 网格系统，要使 4 跨度列和 8 跨度列彼此相邻，请使用以下 HTML:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

<div>然后获得正确的宽度和装订线，以及 float 的正确组合相关代码，以便将它们布置为列。因此，您无需为各个列编写(并在各种浏览器中调试)任何布局 CSS，从而节省时间。

但是，如果您正在实现的设计不使用布局网格，那么 CSS 网格系统根本无法帮助您，因为您没有实现布局网格。