一、栅格系统是什么？
栅格系统是一种将页面划分为多个列和行的布局结构，能显著提升视觉一致性和组织性。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。
二、栅格的构成要素
栅格系统的基础要素主要有：网格、列、水槽、边距、总宽、容器盒子。
网格（Grid）：小单元格，由若干个单元格组成，1px*1px的容器大小就是网格。
列（Column）：是页面上的垂直区域，指的是栅格数量。
水槽（Gutter）：是列与列之间的空间，越复杂的产品，间距越小。逼格越高的产品，间距越大。
边距（Margin）：是页面外部的空间，指界面内容到屏幕边缘的距离
栅格总宽（Container）：是页面上总的宽度，也就是栅格的总宽。
容器盒子（Container）：是页面上所有内容的总和，也就是栅格系统的容器，指布局信息的版面区域
三、如何建立栅格系统
①确定内容宽度
PC端就是确定你网页内容的整个宽度，一般页面的左右外间距是不固定的，会更加不同的适配方式而变化。
移动端，就是确定你的外间距，因为移动端的设计一般是按比例设计，所有的适配都是按比例来的，间距也是按比例固定的。
②确定水槽宽度
水槽的宽度就是内容模块之间的间距，比如设置成12、24或者10、20等等
③确定栅格列数
列数就是将页面内容区域分成多少等份，比较常用的会是12列或者24列
④利用工具建立栅格系统
在布局网格选项里面可以自定义网格行数、列数、然后修改自己想要的水槽宽度。
四、栅格的应用
有三种适配策略：固定栅格、动态栅格和混合栅格。
1、固定栅格: 固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。
2、流动栅格: 流动栅格和固定栅格的区别是它的元素大小会发生变化。
3、混合栅格: 混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。
五、栅格系统的应用准则
栅格系统在设计中的运用必须遵循以下5个准则：
①栅格系统的核心思想是：内容元素必须位于若干列上
②水槽内禁止放任何内容元素
③父级元素对齐栅格，子级可以不完全对齐列
④除非特意设计，否则不要在列之外区域放置元素
⑤特殊的设计风格，可以有例外规则
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質服務" 的經(jīng)營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應用服務。
公安局備案號：
專屬顧問
