快缩短网址 · 设计札记
suo.run

如何以设计目标为锚，挑选最合身的网格？
——一次从桌面到掌心的优雅漫游

网格不是冰冷的坐标，而是设计师的隐形节拍器。它让节奏、层级与留白在同一首乐曲里呼吸。当屏幕尺寸从 27 英寸折叠到 5 英寸，节拍依旧不能紊乱。以下四种布局，像四把钥匙，分别开启不同场景的大门。

1 单栏布局：全屏一镜到底
别名「全屏叙事」。它把舞台交给巨幅影像或一句极具张力的宣言，适合主页、发布页、操作指引。
桌面端：12 栅格可全部合并为一列，元素自上而下依次落座。
移动端：栅格自动堆叠，无需额外断点，天生适配。
呼吸感来自「模块等距」——无论卡片大小，间距恒定，让视线像水一样自然流淌。
案例：WeWork 官网、Apple 新品发布页。



2 双栏布局：正文与侧翼的二重奏
左侧 8 列承载正文，保证 65–75 字符的舒适行长；右侧 4 列化作导航、目录或广告。
桌面端：偶数栅格方便均分，后期开发可直接映射到组件。
移动端：侧栏滑入抽屉，正文独占视口，阅读体验无损。
案例：Mango Learning 课程页、Discord 帮助中心。



3 三栏布局：信息市集
常见于仪表盘、资讯聚合。12 栅格拆成 3–6–3 或 4–4–4，让高频操作、核心数据、辅助工具各就其位。
桌面端：三栏同时铺陈，一眼览尽。
移动端：侧边两栏叠为可收起的 Tab，主栏保持纵向滚动。
案例：Notion 数据库视图、Twitter 桌面版。

4 卡片瀑布：无限延伸的画廊
Pinterest 式瀑布流，列数随视口弹性增减。
桌面端：12 栅格可拆为 4 或 5 列，卡片高度自由，营造「探索」氛围。
移动端：列数降至 2，卡片宽度自动拉伸，保持点击区域舒适。
案例：Dribbble 作品页、unsplash 搜索结果。

尾声
在 suo.run，我们把每一次缩短都当作一次「折叠空间」的魔术。无论你的落地页是单栏史诗还是卡片市集，记住：网格是节拍，内容才是旋律。