网格系统：初识网格系统（一）

一、初识网格系统

“要是说网格有限制，就等于说语言有限制或者排版有限制。”

     —— Ellen Lupton

为尊重原创，转载请标明原出处，谢谢理解！
https://blog.csdn.net/weixin_44775811/article/details/108616974

1、为什么要学习网格系统

想必大家在做平面设计的时候应该知道“Grid Systems”，网格理论产生于20世纪初期，网格的产生也许是设计师想在平面设计的实践中建立秩序的最生动体现。在业界的各种最佳设计中，网格的影响几乎无所不在。网格既能表现出一个设计师制造秩序的倾向，也是一种替个人和企业组织系统的实用工具。

比如，黄金分割与斐波纳契数列紧密相连，斐波纳契螺旋展示出了一种对人类产生数实际影响的网格。对设计师来说更有意思的是，当斐波纳契数列表现为对数螺旋线时，就立刻构成了一个和谐而有逻辑的网格。

众所周知的是：使用网格进行设计具有多种优势。

网格的使用不仅可以让界面的信息呈现更加层级清晰，流畅美观，让产品更好的被欣赏及使用，而且，对于前端开发来说，实现将更加的灵活与规范。有规律的布局是设计的一个基本原则，反之，无序凌乱的产品界面给人以一种劣质的感觉，毫无节奏及美感，无品质感可言。

2、网格的基本组成

设计出优秀网格的关键是精确度，但有效性也同样重要

• A外边距

边距是网格列和行之外的安全空间。

• B列宽

列是网格的垂直部分，一般移动端6列，移动端不适合列太多，列太多会让页面更碎。
网页常用 12 栅格，每个栅格包括列和水槽，列承载内容，水槽不能填充内容，避免内容堆叠在一起。网格中列越多，灵活性越大，相应的复杂度越高，所以列不是越多越好

• C水槽

列和行由水槽分隔，每个界面由N个列和（N-1）个水槽组成，如果你希望你界面间距大点，水槽就可以留大，相反水槽越小，越紧凑，一般情况水槽里面是不放内容的，除非和区域一样组合使用。

• C 行

行是网格的水平部分，也是横向部分，它们通常在网页设计和移动端设计中被省略。

• D组合区域

内容区域，填充设计内容，模块是由行和列交叉创建的空间单位，很多时候需要将多个栅格合并形成一个组合区域使用；组合区域内的水槽就可以承载信息。

希望小伙伴帮忙点个免费的“关注”哇🌹，推荐给身边更多需要的小伙伴一起学习哇🤩，关注公众号后台回复免费获取学习资料

（ps：学习资料是我精心挑选的，都是我学习使用过觉得不错才分享给大家的，大部分都是我自掏腰包买的，绝对是行业内大佬的精品课）