编者按：本文适合对网格系统不熟悉的新手阅读。大量的图片和简单的解释可以帮助您快速了解什么是网格系统。马小青：我们都知道在平面设计中，网格辅助设计的运用可以让页面充满统一的秩序感和韵律感。在网页设计中，我们也需要视觉上的统一性和一致性，让页面更加专业化和系统化；但同时，网页设计相对于传统的平面设计也更强调动态和系统的思考。网格系统可以帮助我们制定网页设计的规则。了解网格和前端应用程序的基本原理对于网页设计变得非常重要。一、网页网格系统的必要性1、专业地为页面制定一套基本规则，可以保持整体设计的一致性和专业性；避免无效的设计尝试并专注于有意义的设计方向。2、高效遵循网格系统的设计细节，无论是元素、模块还是页面，都有章可循，减少了设计决策的时间，减少了对外沟通的损失，提高了工作效率。3、布局基础网格系统的应用，可以作为响应式网页布局的基础。2、网格系统的基本概念网格（Gird）：网格系统的最小原子单位列、汇（Column、Gutter）、网格总宽度（Container）、边距（Margin）、框/区域(Col-n)1。网格：网格系统的最小原子单位网格是由一系列规则的小网格组成的网格系统，网格构成了页面的最小单元。通常，网页设计中常用8作为网格的最小步进单位。一些知名公司将网格以8为最小单位进行划分，以规范页面的顺序，如：AntDesign、MatierialDesign等。编者按：DesignSpecification官网汇总→https://www.uisdc。com/design-specification-website这样做的好处是双重的。偶数思维：以8为底倍数，元素大小可以被大多数浏览器识别和整除，最大程度避免半像素的出现。规则性：所有元素以8个像素为??步长单位，元素的大小和间距是规则的。为什么不是6、10或其他？以8为步进单位，进度适中，既不因间隔过大而过于细碎或散乱；许多开源代码使用8的倍数作为默认设计大小；已经被多次论证，8点格子甚至形成了一套理论。凡事都没有绝对。如果你做的是固定结构的网页布局，不管响应式网页设计如何，你都可以根据实际情况自己设计网格，以偶数为最小单位。为什么强烈推荐“8点格子”→《让设计更高效!正式为大家安利这个好用的「8点栅格」》2.列+间距（Column+Gutter）列（Column）：列是网格数量的单位，通常设置网格数是指列数，例如12个网格有12列，24个网格有24列.通过设置column的padding来自定义gutter的大小，剩下的就叫column。Gutter：页面内容的间距。gutter的值越大，页面越空白，视觉效果越松散；否则，页面将越紧凑。插槽通常设置为常量值。3.网格宽度（Container）网格宽度（Container）：页面网格系统的总宽度。4.MarginMargin：网格的外边距，与屏幕宽度保持一定的安全距离。行：网格系统的水平网格，垂直于垂直网格的列，列和行的相交区域构成了页面的内容区域。由于现在的网页多采用瀑布流形式，上下滑动区域变得无限大，随意性强。这部分在本文中被忽略。这里需要注意的是：我们把grid的列看成column+slot的宽度，12个grid是指12列。在一些文章中，columns和slots的理解就像下图左图，但是从开发的角度来看，下图右图是前端理解的grid。我们使用网格来制定页面的视觉规则，同时也需要了解开发是如何实现网格的，以减少工作中不必要的沟通误会。5.box/area基本网格建立后，一段内容通常会占据几列和几列的宽度。我们把这个区域理解为一个内容框，用来承载一个区域的内容。上面，网格的基本概念已经清楚了，那么如何开始为自己的项目搭建网格系统呢？三、如何构建网页网格1、确定屏幕尺寸，确定安全范围。当我们开始一个项目时，首先要考虑设计什么尺寸范围，即确定网格区域的宽度范围。2.确定关键数据：列数，下沉宽度。常见的网格系统通常分为12格或24格。我们需要根据自己的项目来确定网格划分的个数。划分的格子越多，承载的内容就越精细。通常24格常用于信息复杂的后台系统，一些商业网站和门户网站通常也分为12格。网格没有尽可能细地划分。24格还好，但容易显得琐碎。内容编排规则太多，等于没有规则。有的项目还根据实际情况分为16格和20格，也是可以的。△slot的值越大，页面应该越空白。需要注意的是，槽位区域不能放置任何内容。通常，我们为插槽设置一个固定值来确定列的大小。计算公式我们假设内容区域的宽度为W(Weight)，列宽为C(Column)，列数为n，槽位为固定宽度G。可以得到：W=C*n。由于插槽不能放置内容，可见内容区域为：W=C*n-G。示例：我们为一个屏幕宽度为1440的项目划分网格。首先我们确定内容区域的宽度为1440，24列，slot固定值为16；那么我们可以得到一个列宽60，一列48。内容区域应该从水箱开始到水箱结束：附件：草图网格工具目前很多软件都提供自动网格设置功能，而草图还提供这样的功能：LayoutSettings。TotalWidth：相当于Container，也就是内容区域的宽度。Offset：表示网格的偏移量，表示网格从哪里开始。列数：表示网格数。外面的排水沟：记得检查一下。勾选后，光栅设置会匹配前端光栅算法。GutterWidth：槽位的值，一般为固定值，控制页面的空白间隙。ColumnWidth：列（列+槽）的值，即网格单个内容区域的宽度。
