网页设计中的栅格 第1篇
网格是构成页面栅格系统的最小单位。PC端我们一般用8作为网格的最小单位。
手把手教你做规范--布局规范（栅格）
为什么用8？
尽量保持单位是偶数，这样在页面放大或者放大或者缩小时还能保持清晰。在保证偶数的前提下，使用“ 2、4、6、8、10、12... ”作为最小单位都是可以的。
通常情况下PC端横向是固定的，纵向是可以滚动的。根据2019年中国PC端分辨率端统计，“4、8”只有不能被1366整除，其他都可以。由于4过于小，普通用户从视觉上不容易分辨差别，所以我们选用8作为最小单位。之后所有的数值都使用8的倍数。
网页设计中的栅格 第2篇
创建页面
设计页面时，我们通常从小尺寸做起，缘由后续详述。
添加栅格（竖直）
添加栅格（水平）
我们一般不添加水平栅格，而是用参考线替代。如果要添加的话，同理，在设置中选择“Rows”即可。
网页设计中的栅格 第3篇
为什么设计页面要“从小做起”?
我们应避免一开始就创建固定为 1980×1080 像素的页面，因为这样的设计往往难以灵活适应不同设备和屏幕尺寸。相反，我们建议先从一个较小的、更基础的页面布局开始设计。
因为小尺寸的设计更容易适配到更大的屏幕上，实现响应式布局。而直接从大尺寸设计开始，则可能面临难以向下适配到小屏幕设备的挑战。
此外，值得注意的是，现代浏览器普遍支持向上兼容的页面，即能够较好地渲染和展示为更大屏幕尺寸设计的网页内容。因此，我们仍应优先考虑从小尺寸出发
当我们的小页面设计好后，我们应该去做更大的页面。
这时，就可以使用 Figma 的 Auto layout （自动布局） 功能来实现。
我们以这个低保真原型网页为例子，来实现响应式布局。
可以发现，当我们拖拉改变页面大小时，页面内的元素是混乱无序的。
那么我们如何使内部的元素仍然按原先的布局排布呢？
Auto layout 可以帮我们实现。
我们以中间这个版块为例：
这里因为想把右边两个元素当成一部分，所以选中元素，按 Shift + A 给右边部分添加一个小框架。
选中全部元素，按 Shift + A添加外部的大框架。
这时我们会发现，内部的元素间距有些混乱。
所以，我们要进一步操作。
选中子元素外的小框架，在右边的操作栏中调节 padding，这里调为 0。
选中小框架，调节元素之间的间距 gap
重复步骤（4），调节左侧元素的 padding
选中外部大框架，修改 gap 为 10。
如此，我们就完成了基本框架，接下来只需修改每个小框架的对象尺寸和对齐方式。
选中每个小框架，在右边的的操作栏中修改对象尺寸。