一、栅格系统是什么？
栅格系统是一种将页面划分为多个列和行的布局结构，能显著提升视觉一致性和组织性。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。
二、栅格的构成要素
栅格系统的基础要素主要有：网格、列、水槽、边距、总宽、容器盒子。
网格（Grid）：小单元格，由若干个单元格组成，1px*1px的容器大小就是网格。
列（Column）：是页面上的垂直区域，指的是栅格数量。
水槽（Gutter）：是列与列之间的空间，越复杂的产品，间距越小。逼格越高的产品，间距越大。
边距（Margin）：是页面外部的空间，指界面内容到屏幕边缘的距离
栅格总宽（Container）：是页面上总的宽度，也就是栅格的总宽。
容器盒子（Container）：是页面上所有内容的总和，也就是栅格系统的容器，指布局信息的版面区域
三、如何建立栅格系统
①确定内容宽度
PC端就是确定你网页内容的整个宽度，一般页面的左右外间距是不固定的，会更加不同的适配方式而变化。
移动端，就是确定你的外间距，因为移动端的设计一般是按比例设计，所有的适配都是按比例来的，间距也是按比例固定的。
②确定水槽宽度
水槽的宽度就是内容模块之间的间距，比如设置成12、24或者10、20等等
③确定栅格列数
列数就是将页面内容区域分成多少等份，比较常用的会是12列或者24列
④利用工具建立栅格系统
在布局网格选项里面可以自定义网格行数、列数、然后修改自己想要的水槽宽度。
四、栅格的应用
有三种适配策略：固定栅格、动态栅格和混合栅格。
1、固定栅格: 固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。
2、流动栅格: 流动栅格和固定栅格的区别是它的元素大小会发生变化。
3、混合栅格: 混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。
五、栅格系统的应用准则
栅格系统在设计中的运用必须遵循以下5个准则：
①栅格系统的核心思想是：内容元素必须位于若干列上
②水槽内禁止放任何内容元素
③父级元素对齐栅格，子级可以不完全对齐列
④除非特意设计，否则不要在列之外区域放置元素
⑤特殊的设计风格，可以有例外规则
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
