我们在设计网页的时候除了需偠选择不同的元素搭配以外，同时也需要通过一定的形式来进行元素的布局而这时候就是栅格系统发挥作用的时候。

栅格系统英文为 Grid Systems吔有翻译为网格系统。

定义：运用固定的格子遵循一定的规则，进行页面的布局设计使布局规范简洁有规则。

栅格早起源于平面设计1692年法国为提高印刷水平，以方格为设计基础将一个印刷版面分成上千个小格，这就是早的栅格雏形再后来，慢慢演变成运用固定的格子设计版面的平面设计风格

包括网页端和移动端，是以规则的网格阵列来指导规范界面中的版面布局以及信息分布

3. 为什么要使用栅格

通过栅格的使用，可以用逻辑解释商业设计的细节问题

设计内容都应该有所依据，当其他人质疑时可以系统有底气的解释设计内容。设计师可以利用栅格让画面更有调性让内容更具可读性;可以快速校准元素的位置，让画面更平衡;可以模块化地管理元素让版面更有層次感。

除了使用水槽的0.5倍还可以使用0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20使用0.5倍，安全边距为10;水槽是20使用2.0倍，安全边距为40

栅格是辅助页面布局的，所以需要根据实际内容灵活的使用栅格而不要被栅格所束缚。

影响网页设计的两大因素

影响网页设计的两大因素：分辨率和浏览器

比如px，整个屏幕可以看成是由很多小方格子组成一个像素就是一个小格子，横向有1920个小格子竖向有1080个小格子。

电腦屏幕是14寸还是15寸的尺寸不变，电脑分辨率是可变的在同一个屏幕上，分辨率越大画面就越精细反之就越模糊。当下比较流行的屏幕分辨率：、、、、、、等

关于分辨率，可以选用适合自己团队的分辨率尺寸我们团队是梳理出所有产品的分辨率的使用情况，及团隊产品设计的特点选取2~3个作为后续统一使用的尺寸。

设计网页时要考虑好浏览器主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。

因为不同瀏览器工具栏高度不同如果设计内容需要在小屏幕上展示，就要考虑到打开浏览器默认页面及全屏页面的高度展示情况如果浏览器所占高度较多，那么内容展示区域就被压缩了所以就要考虑将重要的内容尽量放在上面。

节选：公众号：蜗牛启奏

【免责声明】：本内容轉载于网络转载目的在于传递信息。文章内容为作者个人意见本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性與完整性提供形式地保证请读者仅作参考。