《快缩短网址 · 格栅之道》
suo.run 设计体系白皮书

一、序章：秩序的呼吸
在数字疆域，像素是最低维度的生命。当它们被赋予节奏，便诞生「格栅」——一种让混乱归于和谐的隐形乐谱。快缩短网址（suo.run）以格栅为骨，以 8px 为脉，将万千链接的短暂旅程，化作一眼可辨的秩序之美。



二、格栅，究竟是什么？
1. 原子单位
8px 是最小音节，既呼应主流屏幕的物理像素，又兼容 Bootstrap、Ant Design 等开源心脏。它像一位谦逊的节拍器，确保每一次呼吸都落在偶数拍上。

2. 列与槽（Column & Gutter）
列是舞台，槽是留白。
• 12 列：如大提琴的低吟，适合信息密度厚重的后台。
• 24 列：似小提琴的轻颤，让多元模块在纤细间起舞。
槽宽恒定，留白即情绪——越宽，呼吸越舒缓；越窄，节奏越紧迫。

3. 内容盒（Content Box）
当列与槽交织成棋盘，内容盒便是落子的疆域。它横跨 n 列，占据 m 槽，像一枚优雅的印章，为信息盖上「此处在此」的落款。

三、构筑格栅：三步成诗
1. 量体裁衣——定宽
全屏场景：
格栅宽 = 响应式宽 – 2×页边距
居中场景：
格栅宽 = 响应式宽



2. 列阵布兵——划列
公式：
格栅宽 = n×(列宽 + 槽宽) – 槽宽
推荐利器：GridGuide，一键生成黄金比例。

3. 纵墨横毫——留白
横向：以 8 为基，衍生 16、24、32… 让层级像涟漪般荡开。
纵向：8/16/24 三阶间距，辅以 1px 分割线，信息即刻拥有景深。

四、格栅的舞姿：横纵两仪
1. 横向切分
12 列可化作 2、3、4、6 等分，亦可自由拼贴。
例：查询页
• 筛选区：3 等分
• 数据概览：3 等分
• 数据列表：1 等分

2. 纵向韵律
y = 8 + 8n
一行代码，间距即乐章。



五、尾声：让链接呼吸
在 suo.run，每一次缩短都是一次微缩的建筑。格栅不是枷锁，而是让链接在最短的停留里，也能被一眼读懂的温柔秩序。愿你以 8px 为笔，在方寸之间，写下浩瀚。