960网格系统变得简单

我第一次发现960网格系统，我立刻为能够如此轻松地实现复杂布局而感到兴奋。然而，由于当时我对网页设计还是个新手，当我下载这些文件时，我很快就被整个网页设计的复杂程度所淹没。这么多代码，怎么可能是简单的方法创建一个布局?

这篇文章是为网页设计师和前端网页开发者谁感兴趣基于网格的布局系统但却不知道如何破译它们。我们将特别关注960网格系统，但是在阅读了本指南之后，您将发现大多数其他网格系统都是相似的，并且在您理解了一些基本原则之后，您将会更有意义。

基于网格的设计

在我们进入960网格系统的细节之前，让我们简要地讨论一下基于网格的设计。这个想法当然不是源自网络。事实上，它源于一个最古老也是最基本的设计原则:对齐．

我们的大脑喜欢简化事物，使其易于理解。这就是为什么我们试图给看似混乱的事物强加秩序，就像在月球上的陨石坑中看到一张脸。自然地，越容易建立秩序，我们的大脑就能越快地识别一种模式并继续前进。

网格是如此的有组织和有序，以至于它们我们这部分几乎不需要解释。考虑如下图所示的两个页面布局。虽然这两个图片都是简单的矩形的集合，顶部的布局似乎从根本上比底部的更好。

我们可以立即识别一种模式，接受它，然后继续前进。然而，相比之下，底部的图像在视觉上是令人不安的。没有明确的模式、顺序或目标——它只是看起来像一个随机的形状组合。

当我们试图识别一个趋势时，我们的眼睛有一种疯狂地搜索不到一秒的倾向，这增加了在整个场景中所需的时间。值得注意的是随机仍然可以是美丽的。随机无疑在自然、艺术甚至设计中都有自己的位置，但它并不是一种逻辑组织信息的方法。

关键在于，网格是在页面上创建秩序的最简单和最强大的方法之一。它们可能看起来冷酷而死板，但请记住，它们都是非常高效和有效的，甚至可以相当灵活，如果你不让你的想象力陷入必要的结构。

为什么我需要一个网格系统?

960网格系统——以及其他类似的工具和系统——提供了一种使用CSS创建基于网格的布局的快速而简单的方法。它们通过提供跨浏览器测试和优化的预设列宽度来实现这一点，以便您将内容设置为该宽度。

这些网格可以帮助您节省您的在线营销预算．之前CSS3在美国，要把一页纸分成几列而不涉及乏味的数学是很不容易的。例如，如果你有一个1000像素宽的容器，你想把它分成三列，那就是每列333又1/3像素(不是一个很好的整数)。

此外，像这样分开的列会相互碰撞，所以必须在每一边添加边距。如果为每一列的每条边添加10像素的边距，则必须从每一列的宽度中减去20像素。这为我们提供了3列，每列大约313像素宽，每边的边距为10像素(即使这样你是在999px而不是1000 px)。

想要下面一行有4列吗?然后你必须重新开始这个过程，从1000px中减去80px的边距，总共是920px，然后除以4得到列宽为230px。最后，如果您想添加一个占页面总宽度三分之一的侧边栏，您必须创建一个750px的内容栏和一个250px的侧边栏，然后减去40px的边距，得到一个730px的列和一个230px的列。

困惑了吗?其他网页设计师也是如此。这并不是一件复杂的事情，但也不是你想要在你创建的每个项目中反复经历的事情。

解决方案?找别人算出所有这些疯狂的列宽，把它们放到CSS文档中，让你免费下载。)那个人碰巧是内森•史密斯， 960网格系统的创造者)。

960网格系统

960网格系统是一种简单的方法，使用960像素宽的网格布局网站。它是960像素宽的原因是，当考虑到列宽和边距时，数字960可以使用整数进行很多干净的除法。而且它能很好地适应大多数屏幕。

960 GS有两个主要的变体:一个12列的网格和一个16列的网格(24列的版本也包括那些真正需要额外的控制)。在12列的版本中，最窄的列是60像素宽。之后每列增加80像素。

所以可用的列宽度是:60、140、220、300、380、460、540、620、700、780、860和940。类似地，在16列的版本中，最窄的列是40像素宽，之后的每列增加60像素。所以可用的列宽度是:40、100、160、220、280、340、400、460、520、580、640、700、760、820、880和940。

CSS类现在在会话

当你看上面的图表时，把每一个深蓝色的水平条看作960网格系统中的一个CSS类。要在布局中创建一个对象，它是那些条的宽度之一，你只需分配适当的类给你的div -就是它!类可以根据它们的大小方便地命名grid_1CSS类是最窄的grid_12CSS类最宽(grid_16是16列版本中最广泛的)。

因此，为了重用上面的图像，现在看看可用的列，但这一次，考虑使用它们各自的CSS类，而不是像素宽度。这种命名系统使得在几秒钟内完成复杂的布局变得非常容易。要填充页面宽度，需要记住的技巧是，分配给所选类的数字在12列的版本中必须等于12，在16列的版本中必须等于16。

例如，使用12列版本，如果你有3 div的文本，你想要在3列布局中并排显示，只需分配grid_4上课以每一个为总12(4+4+4=12)。同样,分配grid_416列版本的CSS类可以很容易地创建4列布局(4+4+4+4=16)。为了确保您引用的是正确的类，请确保将12列元素与类一起放置在一个div中container_1216列的类在一个div中，这个类叫做container_16．

如果你之前从未使用过96 GS，我希望你现在能够拥有自己的“顿悟”时刻，即使用这一系统在任何时候都能够轻松地指定一个布局。

推我，拉我

960网格系统允许你通过沿着页面水平推或拉元素独立地重新定位它们。这是通过使用推而且拉CSS类。例如，考虑下图中的两个例子。

第一个示例是一个基本的4列布局，只使用grid_3类。然而，在第二个版本中，我推了第一列，拉了最后一列，导致它们的位置从它们在布局中的正常位置跳过了一列。请记住，您可以将项目推到您想要的最远。

如果我想把一个元素推到两列，我就会实现这个类push_2等等。推/拉系统对如何在HTML文档中布局页面有很大的影响。例如，在下面的例子中，想象网站的名字以标志形式打印出来，并放在页面的第一个元素。

作为页面上最重要的元素，您希望将徽标作为HTML标记中的第一项，但在视觉上，您实际上希望它出现在页面的中心。

前推/拉:

为了在视觉上定位logo元素在两个文本列之间，你可以使用以下HTML:

< div class = " grid_6 push_3”>标志< p > < / p >