2

哪些 CSS 网格系统可以快速完成而我们离不开它们？

我从事各种资源的自由项目，我得到的 Photoshop 文件 (PSD) 不是基于网格或不使用相同的网格宽度和列、排水沟。我没有与设计师直接交流。我只直接从客户或其他自由职业者/分包商那里获得设计文件。我擅长为 PSD 制作 HTML CSS，而不使用任何具有 IE 兼容性的网格。

这些天 twitter bootstrap 在社区中很流行，它基于 940px 宽度的网格和其他东西，用于按钮和 jquery 插件。

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

4

1 回答 1

3

如果您正在实施的设计不是基于布局网格，那么 CSS 网格系统将完全帮不了您。

我可能会在这里显示我缺乏设计知识，但我的理解是布局网格指定布局列的最小宽度，例如 60 像素，以及装订线的宽度（列之间的水平空间），例如 20 像素。然后，较大的列由最小列宽和装订线的倍数组成——例如，一个 4 跨距的列与四个单独的布局列一样宽，加上三个装订线。

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

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

您只需将类应用于 HTML 元素。对于 Twitter Bootstrap 的 CSS 网格系统，要让 4-span 列和 8-span 列彼此相邻，您可以使用以下 HTML：

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

然后<div>s 获得正确的宽度和间距，以及float-related 代码的正确组合，以便将它们布置为列。因此，您不必为各个列编写（并在各种浏览器中调试）任何布局 CSS，从而节省时间。

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

于 2012-02-01T11:21:31.140 回答