UI设计：栅格

参考视频：

新像素【干货】你要的栅格系统教学 草帽老师结合开发中的自适应布局把栅格布局你讲的明明白白（1/2）UI设计培训_哔哩哔哩_bilibili

目录

1 栅格的基本特点

2 列宽

2.1 流动拉伸

2.2 固定大小 

3 临时用户界面区域 

4 注意事项

5 在Figma中创建栅格 

---

        在Bootstrap的设计里，每一个网页有12个栅格。栅格是衡量每一个框大小的单位。

1 栅格的基本特点

• 栅格与栅格之间存在间距
• 栅格的内部存在Padding（内边距）
• 最左边的栅格和最右边的栅格与浏览器边界之间存在大边距
• 每个栅格的宽度被称为列宽

2 列宽

2.1 流动拉伸

        随着窗口被拉伸，列宽也随着等比被拉伸，整体流畅地等比缩放。也就是说，边距不变。使用断点来确定整个布局是否需要大更改。