CSS网格系统在实现非’；基于t网格？

什么样的CSS网格系统做得很快，而没有它们我们做不到

我在各种资源的自由职业者项目上工作，我得到的Photoshop文件（PSD）不是基于网格的，也不是使用相同的网格宽度和列、水槽。我没有和设计师直接沟通。我只直接从客户或其他自由职业者/分包商处获得设计文件我擅长在不使用任何网格的情况下为PSD制作HTML CSS，并且与IE兼容。

现在twitter引导程序在社区中很流行，它基于940px宽度的网格和其他按钮和jquery插件

---

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

如果您实施的设计不是基于布局网格，那么CSS网格系统根本帮不了您

我可能会在这里说明我缺乏设计知识，但我的理解是，布局网格指定了布局列的最小宽度，例如60px，以及檐槽的宽度（列之间的水平空间），例如20px。然后，较大的柱由最小柱宽和檐槽的倍数组成-例如，一根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>

...
...

然后，

s获得正确的宽度和排水沟，以及与

浮动相关的代码的正确组合，以便将它们作为列进行布局。因此，您不必为单个列编写（并在各种浏览器中调试）任何布局CSS，从而节省了时间

但是，如果您正在实施的设计没有使用布局网格，那么CSS网格系统根本帮不了您，因为您没有实施布局网格。
因此，只有当设计师和开发人员都以这种方式思考和工作时，才使用基于网格的框架，而框架的其他问题是，一年前的一个项目中，我使用Blueprint CSS框架进行PSD 2 HTML转换。转换很好，客户很高兴，但他在2-3天后回来告诉我，他的后端开发人员正在努力理解我用来对齐方框的技术和许多其他东西，最终我不得不以正常方式重新编码。“因此，只有当设计人员和开发人员都以这种方式思考和工作时，才最好使用基于网格的框架。”-正确，就像你不会使用jQuery lightbox插件来实现下拉菜单一样。关于理解CSS框架/库的后端开发人员，我个人只看了960.gs的源代码，但阅读后我花了大约10分钟才理解。显然我对CSS很满意，但我我很想知道你重新编码布局的“正常方式”是什么——后端开发人员觉得什么更容易理解？我从Chris的文章中摘录了这些话"我曾经做过一项工作，客户希望一切都能用YUI完成，从网格开始。我花了更多的时间学习YUI，试图找出如何将一个已经设计好的Photoshop文件塞进其中，而不是花在细节和质量上。最终我们完成了，但花在尝试上的时间很容易就翻了三倍使用这个我无法想象的框架最终非常有用，“我很好奇你所说的”我们通常的方法是什么意思。"通常是什么？HTML/CSS没有网格布局的元素。你可以使用
display:table；
，但这很难做出响应。你可以
float:left；width:50%；
将东西放在一起，或者你可以为每一列设置特定的
width
s，并使用媒体查询使其响应，whBootstrap就是这样做的。我个人认为，当与那些在Photoshop中装配所有东西而不了解Bootstrap的设计师合作时，Bootstrap会成为一个更大的障碍，但当客户只是想让你做点什么的时候，它会非常棒。