核心：布局是界面的骨骼，栅格定秩序、间距出节奏、容器做适配。
一、栅格系统：布局的骨架 🧩
三要素：列 (Columns)、水槽 (Gutters)、外边距 (Margins)
为什么常用 12 列：能被 1/2/3/4/6 整除，布局最灵活
使用原则：
宽度必须是整列，不出现小数
主次内容用占列比例区分层级
同级内容列宽一致
可刻意突破栅格，但不能随意乱跑
二、间距系统：视觉的节奏 🎶
作用：表达关联强弱、建立内容层级、控制呼吸感
标准化：以 4px / 8px 为基础单位，只用倍数（8、16、24、32…）
两种间距：
内边距 Padding：控制元素内部舒适感
外边距 Margin：控制元素间关系距离
三、弹性容器：适配所有屏幕 📱💻
固定宽度：小屏挤、大屏空，已不推荐
弹性容器：宽度自适应 + 最大 / 最小宽度限制
常见最大宽度：
文章阅读：680–750px（最佳行长）
列表 / 仪表盘：1200–1440px
横幅 / 大图：可全宽延伸
四、响应式布局要点 🚀
栅格列数随屏幕缩小：
桌面：12 列
平板：8 列
手机：4 列
间距要随屏幕缩放：桌面大间距 → 手机小间距
页面间距 & 组件内间距分开管理
五、常见误区 ❌
只开栅格线，不对齐、不按列占宽
所有间距用同一个值，没有层级
忽略水槽占用的空间
手机直接照搬桌面间距
一句话记住
栅格定结构，间距定关系，容器做适配，界面才有秩序和呼吸感。
📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
👇文末加入「UIUX 学习指南」，用每天 5～10 分钟的坚持，换取终身受用的“设计竞争力”。
你会发现，那些焦虑和迷茫，都在稳步提升中烟消云散。
