N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
Cards / 05

栅格 · 侧边面板

页面骨架由三件事决定:内容按几列排布、正文与侧栏如何分配宽度、容器最宽到多少。本页把这三件事拆开演示,并给出可直接复制的组合写法。

响应式栅格

1 / 2 / 3 / 4 列
单列 · 阅读型
grid-cols-1
一行一卡,正文宽度最大化
适合长文、条款、说明
移动端默认即为此列数
两列 · 对比型
grid md:grid-cols-2
左卡
右卡
左卡
右卡
三列 · 内容卡片
grid lg:grid-cols-3
01
02
03
04
05
06
四列 · 数据概览
grid lg:grid-cols-4
访问量
12.4k
转化率
3.8%
客单价
¥286
退款率
0.6%
窄屏回落为两列,避免数字被压扁;四列不适合放长文本。

正文 + 置顶侧栏

1fr + 300px / .sticky-top
v3.2.0已发布

Nexus UI 组件库发布说明

本次发布补齐了卡片与布局体系:新增瀑布流容器、手风琴互斥模式、骨架屏与空状态四件套,并把侧栏与页头的间距统一到 8px 栅格上。所有新增组件都同时适配深浅两套主题。

新增
  • 瀑布流容器 .masonry,窄屏单列、640px 起两列、1024px 起三列。
  • 手风琴支持 data-acc="single" 互斥展开,同组内只保留一个面板。
  • 骨架屏 .sk 系列与空状态 .empty 系列,覆盖文本、卡片、列表、头像四种密度。
修复
  • 修复浅色模式下暗色卡片页脚分隔线对比度不足的问题。
  • 修复按钮加载态在图标按钮中被裁切的问题。
陈
陈嘉禾前端架构 · 2026-08-24

内容容器宽度

max-w 系列取值
max-w-[720px] · 阅读容器正文、条款、帮助中心
720px
max-w-[980px] · 内容容器详情页、表单页
980px
max-w-[1180px] · 主容器本页与大多数页面使用
1180px + 左右 28px 内边距
max-w-full · 通栏数据看板、宽表格
100% · 跟随视口
断点sm 640 · md 768 · lg 1024 · xl 1280,栅格列数在这四个断点上变化
间距卡片之间统一 gap-5(20px),区块之间 mt-12(48px),页面左右 px-7(28px)
侧栏左侧导航固定 264px,主内容用 lg:ml-[264px] 让位;右侧栏建议 300–340px
置顶.sticky-top 固定在顶部 72px 处,与顶栏高度对齐,避免被遮挡