我们可以使用 position 或 float 属性定位，我们可以用轻量级图片充当背景，因此使用 Box 的时候我们既可实现网格布局，也可以更有效的实现非网格布局，你可以在 Dave Shea 的 Blood Lust 中看到这个例子，这是他在 CSS Zen Garden 中使用的众多设计之一（图8）。

图 8: CSS Zen Garden: Blood Lust

图9展示了 Blood Lust 中运用的基于 BOX 的非结构化设计，也展示了如何使用 CSS 和 BOX 实现相互独立的非结构化网格。

图 9

一旦我们明白了 BOX 的能力，我们就可以很容易突破网格的束缚。图10中展示了一种高度非结构化，甚至是自由的设计。

图 10: Kutztown University: Communication Design Department

这些 BOX 使用 CSS 定位：

图 11

不仅代码变得更干净，对熟悉 CSS 布局的设计者而言也更直观简单。而这种设计也同样直观易用且不落俗套。

展望

现代布局技术之美是我们有更多选项可选。使用 CSS 我们可以创建易于管理，轻量，视觉丰富的设计，如果乐意，也可以是网格设计，同时，我们也可以很容易地打破或解除这个网格。

这为当代 Web 设计带来更多机会，我们不应因为对网格设计更熟悉而重蹈覆辙。

对于我们这些长期耽于表格布局的人来说，面临的困难尤其大。对多年的 Web 设计者，这意味着同一直使用的东西决裂，有些人也许并不觉得难，然而绝大多数人会心存畏惧。我们需要学习 CSS 模型的工作原理，还要勇于同陈规告别。

有一些新人，他们从未从事过表格布局设计，对他们来说，我们过去的方法既奇怪又死板，正是从这些人中，我们有希望看到更多对设计陈规的突破。

Web 正在走向成熟，我们设计方式也在改变，我们的面前有更多的创新与创意。我们不会拘泥于被规划的城市，我们可以实现独特的设计，我们这些老设计师，联合当今的新人会让 Web 日新月异。

相关阅读

作者感谢 Mark Boulton 的 grid-system 系列文章，并感谢 Timothy Samara 2002 年出版的 Making and Breaking the Grid。

本文作者

Molly E. Holzschlag 是一个知名的 Web 标准倡导者与传授者。她的30多本著作中最畅销的是她同 Dave Shea 合写的 The Zen of CSS Design （禅意的 Web 设计）。Molly 是 W3C 工作组受邀专家，也是 Web 标准项目组（WaSP）的前主管。Molly 同设计者，开发者，执行者与决策者们一起，为实用的，漂亮的，有意义的 Web 提供推动力。

译后记

这是一篇发表于 A LIST APART 的 2005 年的文章，2005年，CSS 布局还不像现在这样普遍，而表格布局已经让很多人不堪其重，作为 Web 领域资深的专家，作者 Molly E. Holzschlag 也是表格布局的长期使用者，当 CSS 接近成熟，基于 CSS 的布局让人耳目一新的时候，她对基于表格的网格设计的心情是复杂的，从文章中可以看出。

然而时间到了2009年，当 CSS 已经无孔不入，CSS 布局也变得烂熟的时候，我们很有必要再次对网格设计进行思考，网格死了吗，或者说表格是邪恶的吗？答案并不那么简单，当今的 Web，无论怎样变化，它的宗旨是永恒的，除了 Web 应用，Web 永远不变的使命是表达和传递信息，如果你是一个文人，你会爱上伦敦，然而如果你是个邮递员，你会选择 Tucson。因此不管是网格设计还是自然设计，并没有绝对的优劣，网格设计更清晰整洁，自然设计更优雅精炼。

而表格，也并不象很多人说的那么邪恶，须知，现在的表格已不是昔日的表格，BOX 可以结合 CSS，表格也可以，完全使用 CSS 进行修饰的表格就像一组有机组合并互动的 BOX，当你并不需要其中的单元格精确定位的时候，表格是一种比 BOX 更完美的容器，因为它对所有浏览器的兼容是最好的，它不会坍塌，不会长短不一，它的行为更容易符合预期，最重要的是，它是人们对事物进行组织的一种最直接的方式。

本文国际来源：http://www.alistapart.com/articles/outsidethegrid

本文链接：http://www.blueidea.com/design/doc/2009/6425.asp　

出处：锐商企业CMS
责任编辑：bluehearts

上一页 突破网格设计的僵局 [2] 下一页