栅格数据的管理模式有（栅格系统在设计中的要点总结）

栅格数据的管理模式有（栅格系统在设计中的要点总结）因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们设计师的稿件开发工程师使用的前端开源组件库比如 Metronic、Antdesign 、padding、margin、sizing等都是基于任何都是8的倍数来还原的8pt栅格系统这个时候我们会好奇，为什么是8的倍数，而不是2、4、6、10、12？第一：前端开源组件库基于8的原子单位来设计

常用的计算方式

五、栅格在设计中的应用

960栅格系统

960栅格系统是在早期被运用的最广的栅格系统，栅格宽度为960px，12列，每列60px，水槽为20px，内容区域的总宽度为940px

8pt栅格系统

这个时候我们会好奇，为什么是8的倍数，而不是2、4、6、10、12？

第一：前端开源组件库基于8的原子单位来设计

开发工程师使用的前端开源组件库比如 Metronic、Antdesign 、padding、margin、sizing等都是基于任何都是8的倍数来还原的

因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们设计师的稿件

通俗来说就是8点栅格是基于前端开发组件来设计的，为了方便对接和提高效率，更高品质的还原我们的设计稿

所以我们在设计时使用8点栅格，基本的使用原则，设计师在设计中需要一致的的使用8倍数来定义元素尺寸，填充和边距

第二，现在的设备尺寸和分辨率很多，对于后期要保证各个屏幕的适配还要确保屏幕不会模糊、失真，以8为单位符合「偶数原则」。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现

第三，8作为最小单位，不会像2、4、6那样显得琐碎页面分割感强，也不会像10、12那样无法把握小细节，让元素与后期开发统一，大大提高开发效率

六、主流网站如何使用栅格系统

一起看一下两个主流电商如何使用栅格布局页面，进一步了解栅格系统的使用