一分钟搞懂UI设计中的栅格系统原理
设计师皮皮码
2026-05-30 15:01:22
栅格系统是 UI 设计里最基础的布局工具，很多新人一听就头大，其实逻辑很简单。
📌 栅格系统的本质： 把页面宽度等分成若干列，设计元素按列来对齐和排布。
📌 三个核心概念： Column（列）：页面被分成的等宽区块。 Gutter（间距）：列与列之间的间距。 Margin（边距）：内容区域到页面边缘的距离。
📌 常见的栅格规格： 移动端：4 列（375px 宽度） 平板端：8 列（768px 宽度） 桌面端：12 列或 24 列（1440px 宽度）
为什么 12 列最流行？因为 12 可以被 2、3、4、6 整除，布局灵活度最高。
💡 新手快速上手： 在 Figma 里直接用 Layout Grid 功能，设置 12 列、Gutter 24px、Margin 自定义，然后所有元素对着列来放就行了。
不需要每个元素都严格卡格子，但大的区块和对齐关系一定要跟着栅格走。
📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
👇文末加入「UIUX 学习指南」，用每天 5～10 分钟的坚持，换取终身受用的“设计竞争力”。
你会发现，那些焦虑和迷茫，都在稳步提升中烟消云散。
0
阅读：0
