便当盒网格设计指南
本站编写的设计取舍与实现建议；实例是说明用的界面方案，不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统，并非同一层级的视觉流派。
设计原理
大小不同的模块嵌入共享网格，以组合关系展示多个功能或内容。模块比例和阅读顺序先于装饰，卡片不是任意拼贴。
适用场景
产品功能介绍、个人主页、少量内容的概要入口。
不适用与取舍
需要连续论证的文章，以及被硬塞成碎片的复杂任务流程。
实现方法
用 CSS Grid 定义列与跨度，模块间距一致；按内容重要性决定大小。窄屏依 DOM 顺序堆叠，避免视觉重排与键盘焦点顺序不同。
具体界面示例
产品页主模块介绍核心能力，两个小模块展示快捷功能；手机先核心能力再功能，卡片可有独立链接。
常见误区
为了填满空格而写无用卡片会稀释内容；固定高度容易截断翻译和放大后的文本。
继续比较
结合材料、布局或父子变体比较选择。