所有类型的设计师都不断面临其设计结构方面的问题.控制布局结构并实现一致且有组织的设计的最简单方法之一就是应用网格系统。
哈喽~小箱子又来了哦！相信很多人都听说过网格系统，也有意识或无意识地在日常设计中加以运用，但大家真的有好好了解过它吗？（文章很长，还请大家耐心观看）
网格就像将设计结合在一起的不可见胶水。即使元素在物理上彼此分离，也有看不见的东西将它们连接在一起。
网格布局系统是传统设计的一部分，但它们仍然与我们所生活的这个多屏幕世界相关。
技术设备从根本上改变了我们搜索信息的方式以及我们在日常生活中的工作方式。如今，所有媒体互动90％都是基于屏幕的，可以在手机，平板电脑等电子设备上观看内容。
因此针对屏幕的设计已成为一个产品不可或缺的一部分。作为设计师，小箱子觉得大家希望为使用我们产品的人提供愉悦和愉悦的体验——网格可以帮助我们做到这一点。
什么是网格
用最基本的术语来说，网格是一种结构，包括一系列将页面分为列或模块的线（垂直或相交）。
这种结构可以帮助设计人员在页面上安排内容。尽管网格线本身不一定是可见的（在某些设计中是可见的），但该结构可帮助大家管理要在页面上对齐的元素之间的比例。
将网格用作页面布局的框架，称为骨架。设计人员可以在该骨架上以易于吸收的方式组织图形元素（例如，文本部分，图像以及其他功能性或装饰性元素）。
网格系统起源于印刷设计，但已应用于许多学科。实际上，如果环顾四周，就会发现我们每天使用的很多东西都是使用网格设计的：
书架也是一种网格Excel中的表是应用网格系统的示例城市建造中使用网格对邻域进行布局应用于UI设计网格简史
在深入了解布局网格以及如何将其应用于数字产品之前，小箱子会带大家退一步回顾过去，以了解基础知识。
这些知识将帮助我们更好地设计数字体验。
网格和早期书籍设计
英格兰圣奥尔本斯网格与书籍排版紧密相关。作为一个系统，网格首先用于纸上写字，然后应用于书籍手稿的排版。
从书籍设计的早期开始，网格就已经帮助设计师安排页面布局，以帮助用户进行阅读。
文艺复兴与和谐设计文艺复兴时期的绘画对网格系统的发展产生了重大影响。
艺术家努力创造出完美的几何形状，从而形成居中且对称的画布布局，并体现了该时期艺术家的作品。
布兰卡契礼拜堂在13世纪，法国建筑师VillarddeHonnecourt创建了一个图表，试图实现“和谐设计”。
该图将网格系统与黄金比例合并，以产生基于固定比例的边距的页面布局。
该技术至今仍在使用，大多数印刷书籍和杂志的设计师都使用VillarddeHonnecourt的图来创建平衡的设计。
VillarddeHonnecourt的图表网格和印刷设计从印刷的开始（15世纪中叶）到工业革命（18世纪末），书是印刷的主要输出。除极少数例外，通常将内容设置在每页一个合理的列中，并在跨页上对称排列。
文艺复兴时期的书网格和瑞士版式我们今天所知道的网格与瑞士的版式联系在一起。
第一次世界大战期间，一直保持中立的瑞士成为欧洲各地富有创造力人士的聚会场所。由于必须以三种官方语言（德语，法语和意大利语）设置印刷出版物，因此设计师需要一种新的网格系统来实现这一目标。
像JanTschichold和HerbertBayer这样的印刷商都采用了模块化的方法。第一次将空白用作布局设计中的动态组件，这导致了复杂网格系统的开发。
约瑟夫布勒·布罗克曼的图形网格系统网格剖析
无论简单还是复杂，所有网格都有一些共同的部分：
格式格式是放置设计的区域。在纸质书中，格式是页面。在网络上，格式是浏览器窗口的大小。
边距边距是格式边缘与内容外部边缘之间的留白部分。
内容模块边距列和水槽在其最基本的形式，网格是由两个主要部分组成：列和水槽。列是网格的组成部分，列之间的空间称为水槽。
列和水槽一起占据了屏幕的水平宽度。
列和水槽模块模块是由列和行的交点创建的单个空间单位。
模块由行和列交叉形成四种网格布局
列、模块、水槽和边界可以以不同的方式组合以形成不同类型的网格。以下是四个标准布局网格：
手稿网格；列网格；模块化网格；基线网格；原稿网格原稿网格（或通常称为单列网格）是最简单的网格结构。它实际上是一个大的矩形区域，占据了格式内的大部分空间。
原稿网格适用于连续的文本块。但是，它们不仅限于文本；还包括文本/图像填充块。
有了这个名字，人们自然会将手稿网格与打印页面相关联。原稿网格传统上用于书籍中，是呈现连续文本块的良好布局。
文本中的原稿网格多列网格顾名思义，多列网格就是有多列的网格。请记住以下简单规则：创建的列越多，网格就越灵活。
多列网格对于包含不连续信息的布局很有用。使用多列网格时，可以为不同类型的内容创建区域。例如，可以将特定的列仅用于说明。
模块化网格虽然多列网格将页面垂直地分为多列，但模块化网格将页面垂直和水平地分为模块。列和行以及它们之间的水槽创建了单元或模块的矩阵。
当需要比列网格提供更多的复杂布局控制权时，模块化网格将非常有用。模块化网格为页面提供了灵活的格式，并允许您创建复杂的层次结构。
网格中的每个模块可以包含一小部分信息，或者可以将相邻模块组合在一起以形成块。
垂直和水平空间收到同等