大家好，这里是 TCC 翻译情报局，我是李泽慧。作者在此篇文章中向我们介绍了网格的发展历史，并科普了在当代网页设计中常用的网格（栅格系统）以及页面布局类型。一起来学习如何高效使用网格系统吧。

过去，我们一直在使用 8 点网格系统，它帮助我们在 UI 界面中，或者一致性上做了有力的贡献。

实现优秀网页布局的最佳方式是运用网格系统。网格是设计的骨架，通过它我们可以做出有指导的设计决策，并为我们的用户创造更好的体验。

1. 网格的历史

当提及网格的使用，我们可以追溯到很久之前。古埃及人在雕刻和绘画中描绘人物时遵守着将人的拳头定为尺度的规则 —— 站立的人物从地面到头顶有 18 个拳头那么高。

活字印刷首先约于公元 1040 年左右在中国发展，中国的瓷器用作了活字印刷的字符。

在西方，金属活字印刷技术首先出现在约 1450 年，1455 年左右古腾堡圣经的出版是出版业的第一个重要里程碑。金属字体文本可以更好地利用网格。

在 1917 年，网格在 Theo van Doesburg 和 Piet Mondrian 引领的荷兰风格主义（新塑性主义）运动中最为明显。他们将画布限制为垂直相交的垂直线和水平线以及原色。

1919 年，德国的包豪斯学派成立，他们简洁实用的设计理念也采用了网格的概念。就像著名的包豪斯国际象棋一样，它的棋子都是简单的几何形状，例如正方形和长方形，可以紧密地组合在一起，以实现紧密的存储。

在 1950 年代，在瑞士终于形成一个全新的平面设计风格。这种设计风格力求通过简单的网络结构和近乎标准化的排版来实现设计上的统一。直到如今，这种风格仍继续影响着许多网页和平面设计师。

随着第二次世界大战的结束，一种新的消费主义出现了。伴随着高速经济发展，广告业逐渐繁荣。Paul Rand 作为美国第一位使用了瑞士平面设计风格的商业艺术家，以他的企业 logo 设计和商业广告设计而闻名。网格在这全新的广告形式中发挥了重要作用。

今天我们将讲一讲网页设计中的网格系统。它听起来很简单，但是实际上包含了一大串复杂的概念。网页设计中的第一步是如何布局。哪里是标题、导航和按钮？这些元素之间要多少间距？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观性。在我们讲页面布局之前，我们需要先科普一些概念。

2. 页面布局

页面布局指的是在网页上的所有视觉元素的排列。通过页面元素的有序排列，建立元素之间的关系，就能更好地引导用户体验。作为网页设计的关键部分，布局决定了页面里的什么元素最受关注，并决定了网页整体的视觉平衡。总之，一个优秀的网页布局可以直接引导用户的注意力到正确的方向。首先吸引他们到最重要的元素，然后根据重要性的排序阅读剩余部分。

3. 网格的作用和概念

实现优秀网页布局的最佳方式是运用栅格系统。网格是设计的骨架，帮助我们有序地对齐和组织网页内容。通用正确地使用网格，我们不会随意地在页面中放置元素，相反，我们会很清楚知道将这些元素放在合理的位置，使得有助于提高设计效率和设计质量。无论是为电脑端还是手机端设计，使用网格可以引导我们做出设计决策、并为用户创造更好的体验。

网格由列（column）、槽（gutter）、安全边距（margin）组成。它们在一起形成了屏幕的宽度尺寸。

Column 是跨越内容区域的垂直部分。网页设计中有的列（column）