（三）栅格与布局

1、基础间距单位

为保证页面布局统一、元素排布规整，内容区块与组件间距需遵循统一规律。本设计系统以 4px 为基础增量单位构建栅格与间距体系，兼顾布局严谨性与场景适配灵活性，确保整体界面节奏一致、疏密有序。

2、移动端栅格及布局

栅格

基于移动端物理宽度和纵向堆叠为主的内容特征，提升分栏灵活度，移动端采用12列栅格，外边距固定 16px。提供两种间距密度模式：

模式	外边距	水槽	列宽	适用场景	使用须知
紧凑模式	16px	8px	21px	信息密度高的列表页、数据表格移动端适配、密集标签组、按钮并排、筛选器区域等。	此模式下需以2/3/4/6/12 列组合使用为主。
常规模式	16px	16px	14px	长文本内容阅读、图文卡片信息流、表单录入与设置页、商品详情与品牌展示、抽屉导航与底部菜单、空状态及反馈弹窗等。	此模式下单栏较窄（14px），需以 3/4/6/12 列组合使用为主。

其他注意事项：

• 顶部避开状态栏、底部避开手势条。
• 金刚区通常跳出栅格约束，采用等分弹性布局。

布局

移动端采用上下布局，顺应单手握持时的拇指操作范围与自上而下浏览习惯，在有限宽度内最大化垂直空间利用。

3、PC 端栅格及布局

栅格

针对PC两大业务场景进行差异化栅格定制。后台面向高频操作，追求屏效与信息密度，栅格以窄边距、流式内容区让渡空间给数据与导航；门户面向内容阅读，追求浏览舒适度与品牌质感，栅格以定宽内容区配合宽边距构建呼吸感。两种场景诉求不同，故各设一套栅格体系，底层共用 24 列以保证跨端一致性。

维度	后台管理	门户页
业务类型	工具型、操作密集型	阅读型、品牌展示型
外边距	16px	80px（1440px 基准下自适应）
水槽	16px	16px
列宽	流式，1440定宽下内容区随侧栏状态（展开224px、收起80px）列宽自适应为（34px、40px）	1440定宽下，内容区域1280px居中，列宽38px
使用场景	数据表格、表单录入、配置管理、日志监控、仪表盘	企业官网、品牌展示、产品介绍、文档中心、营销页
使用须知	栅格仅在侧栏右侧内容区生效；侧栏展开/收起时列宽流式自适应；表格列宽建议按栅格倍数设定	内容区水平居中，小屏边距收缩不低于 24px；全宽视觉模块可跳出栅格；内容区不随屏幕拉伸

其他注意事项：

• 两套栅格不可混用，后台页面不套用 80px 边距，门户页面不使用流式全宽。
• 边距是弹性的，列宽由剩余空间计算得出，页面实际宽度 ≠ 1440px 时栅格仍自动适配。
• 侧边栏宽度（224px / 80px）属于布局框架参数，不纳入栅格体系。

布局

提供T型布局和上中下布局两种类型，二者分别对应"工具效率"与"内容消费"两种核心诉求，满足从后台到门户的全链路场景。