一、栅格系统是什么?
栅格系统是一种将页面划分为多个列和行的布局结构,能显著提升视觉一致性和组织性。栅格系统的使用,让界面信息呈现更美观易读、更具可用性,对于前端来说,网页也将更加灵活与规范。
![]()
二、栅格的构成要素
栅格系统的基础要素主要有:网格、列、水槽、边距、总宽、容器盒子。
网格(Grid):小单元格,由若干个单元格组成,1px*1px的容器大小就是网格。 列(Column):是页面上的垂直区域,指的是栅格数量。
水槽(Gutter):是列与列之间的空间,越复杂的产品,间距越小。逼格越高的产品,间距越大。
边距(Margin):是页面外部的空间,指界面内容到屏幕边缘的距离 栅格总宽(Container):是页面上总的宽度,也就是栅格的总宽。
容器盒子(Container):是页面上所有内容的总和,也就是栅格系统的容器,指布局信息的版面区域。
三、如何建立栅格系统
①确定内容宽度
PC端就是确定你网页内容的整个宽度,一般页面的左右外间距是不固定的,会更加不同的适配方式而变化。
移动端,就是确定你的外间距,因为移动端的设计一般是按比例设计,所有的适配都是按比例来的,间距也是按比例固定的。
②确定水槽宽度
水槽的宽度就是内容模块之间的间距,比如设置成12、24或者10、20等等
③确定栅格列数
列数就是将页面内容区域分成多少等份,比较常用的会是12列或者24列
④利用工具建立栅格系统
在布局网格选项里面可以自定义网格行数、列数、然后修改自己想要的水槽宽度。
![]()
四、栅格的应用
有三种适配策略:固定栅格、动态栅格和混合栅格。
1、固定栅格:固定栅格就是 column 和 gutte 的大小固定,只是栅格的数量发生变化。
2、流动栅格:流动栅格和固定栅格的区别是它的元素大小会发生变化。
3、混合栅格:混合栅格就是在我们的后台产品中将左侧的导航栏固定,对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。
五、栅格系统的应用准则
栅格系统在设计中的运用必须遵循以下5个准则:
①栅格系统的核心思想是:内容元素必须位于若干列上
②水槽内禁止放任何内容元素
③父级元素对齐栅格,子级可以不完全对齐列
④除非特意设计,否则不要在列之外区域放置元素
⑤特殊的设计风格,可以有例外规则
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.