网格系统是一门知识面比较广的学科，这里专门针对Web设计中的一些方式、方法来对网格的知识做一个简洁的提炼，以便大家在界面设计和前端开发时，有一个比较理想化的参考。
网格这一概念已经沿用了许多世纪。它不仅仅适用于Web设计，也可以运用于其他领域，如平面设计、广告创意、APP设计等，图为Web 设计的网格示意图。
这里说到了前端开发，它和网格有什么必要的联系呢？在前端开发过程中，开发者需要对网站的安全宽度、各设备的响应式宽度，以及对不同模块之间及图片文字之间的对齐负责，这些参数需要和设计师的设计稿相符，才能够高度还原设计稿。设计稿和成品网站经常会有特别大的差异，一定程度是由于协作之间产生了很多问题，无法协作设计规范，导致设计与代码的相融性太差。所以我们在设计时，要做好网格标注。在开发过程中，一个像素的误差就可能造成模块间的错位，所以我们需要重视网格系统。
在开始绘制一个网格之前，有许多因素需要考虑。比如，网站面向的用户是谁？界面想要传达的思想和意图是什么？使用什么尺寸的字体？界面模块的尺寸是多少？如何使设计的内容可读性强，易于用户理解？界面布局大概需要几行几列？思考这些问题，以更好地利用网格这个工具，你的设计会更上一层楼。
熟练掌握基本设计原则，能够帮助你成为更好的设计师。使用网格也是基本的设计原则之一。掌握网格是一项由来已久的基本功，需要我们学习了解一些常出现的概念，如网格结构。
首先分开来说，“网格”是由垂直和水平线组成的，“结构”指元素之间的组织与排列。那么通俗一点儿说网格结构就是通过沟槽、行和列、模块、空白、参考线等构件来给页面的文本、图片、信息或图表等元素做一个灵活的结构布局，它能够处理复杂的信息结构，能够更好地帮助设计师完成主要和次要信息的规划，如图所示。
单列网格在结构布局上只有一列，用来处理篇幅较大的信息流、图片流，不需要复杂 的图文排版。这种结构在一些全屏设计、海报、布局、HTML5特效页面设计中是比 较常用的，如图所示。
双列网格在结构布局上有两列，用来分隔设计中的一些不同类型的信息，这些信息可 以是图片、文字，也可以是视频等。两列可以是均等宽度，也可以是一定比例的不同宽度，较小宽度的可以用作侧边栏或辅助栏目，如图所示。这种结构常见于博客设计。
如图所示的游戏风格的网页案例，使用了不同比例的双列布局，将区域固定在右侧，并且按钮比例偏大，非常明显，便于突出游戏主题和引导用户快速了解并操作游戏。
多列网格顾名思义，是使用两列以上的结构，将不同的内容或相同的内容有序地组合起来。多列网格也可以使用一定比例的不同宽度列来进行布局，如图所示。这种布局在瀑布流、博客、、图片展示等领域运用非常广泛。
如图所示的网页案例用瀑布流的砖块布局（Masonry Layout）展示用户的作品，显而易见、便于访问，同时也能够容纳较多的信息。
简单地说模块网格就是由等距离、等空间的无数小方格组成的行与列的组合。它可以针对比较复杂的信息进行布局，如表格、日历、图标、统计数据、不规则图片、图片不规则排列等。模块网格多用于一些信息量大或复杂的排版，也用于大多数普通常见的信息排版、非传统布局 界面排版或偏向交互过程的网页界面排版。这类网页一般来说直观看上去并没有太明显的对齐 感，但是它也遵循了网格参考线（不可见的非实体线）的对齐约束，或者是在使用过程中由一定的交互动画来完成最终的对齐效果。这种稍微复杂的信息结构，并不能靠单纯地使用单列或多列网格结构解决问题，因此才引入了模块网格这个概念。
如图所示的案例包含、表格、APP 图标、Banner、通栏文字等复杂元素，网站中每个模块都混合使用了单列、双列和多列结构，因此整个页面信息结构较为复杂。图中的淡红和淡绿色交汇区域，也是控制在网格的比例范围内的。
简单地说，“网格结构”重在表现信息的结构和层次，是一种网格 的基本知识，并非设计过程中的工具。而“网格系统”作为一种工具和技巧，强调在设计过程中为设计师提供一个基础的网格，让设计师能够更好地运用不同的网格结构来展示信息。在网格系统的辅助下，设计师可以有效地运用不同的网格结构进行排版设计。往往一个 12 列的网格系统可以表现为多种网格结构。
层级网格从字面理解就是采用横向的分层，将信息有序地展示出来。一般来说，介绍 产品功能的网站或单页网站，运用层级网格的方式展示常常见的。
通常情况下，层级网格都是搭配单列、双列、多列或模块网格使用的，在设计过程中，不单单需要考虑信息的纵向阅读，更要考虑信息的横向对齐与可读性。
如图所示的案例是一个单页网站，由上至下分别包含了全屏 Banner、特色、团队、通栏广告、表格、页脚等模块，这些模块由上至下展示，增强了用户操作页面时的可读性。淡红色区域使页面信息分层级有序地展示给用户。
文字編排設計是複雜的過程，須考量層次、閱讀順序、可讀性與對比等諸多因素。但在字體排印系統上，過去台灣、亞洲平面設計學界及業界過度偏重「網格系統」，忽略其實還有其他系統的存在。本書即是透過八大系統的完整介紹，讓相關讀者能夠重新完整地認識文字排印系統，進一步增進設計師的設計能力、拓展設計的可能性。义渠骇