栅格系统
Grid System
别名:栅格栅格系统网格12 列分几栏布局网格grid system12-column grid
这是什么
用列、槽间距与外边距把页面切成可复用的骨架。12 列最通用，因为它能被 2、3、4、6 整除，任意区块都能对齐到列线。 固定栅格稳但脆，repeat(auto-fit, minmax(240px, 1fr)) 让列数随可用宽度自动增减；容器查询进一步让组件按自身容器而非视口回流。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 页面多个区块需要对齐到同一套列线
- 卡片墙要随可用宽度自动增减列数
- 同一组件在侧栏与主区都要自适应，不能只看视口
✕ 不适用场景
- 只有单块内容的极简页面，栅格只添嵌套
- 用栅格硬凑本就不需要对齐的自由排版
- 嵌套栅格超过三层，间距层层叠加失控
常见形式
固定 12 栏
Fixed 12-column
repeat(12, minmax(0, 1fr))，区块按列数跨格，稳但断点写死
自动适应
Auto-fit
repeat(auto-fit, minmax(240px, 1fr))，列数交给浏览器，内容决定宽度
容器查询
Container query
组件包 container-type: inline-size，按自身宽度而非视口回流
实现要点
grid-template-columns: repeat(12, minmax(0, 1fr))gap: var(--grid-gutter)repeat(auto-fit, minmax(240px, 1fr))container-type: inline-size@container (min-width: 40rem)外层定容器最大宽与左右外边距（--grid-margin），列与列之间用 gap 而非 margin，避免末列多余间距。固定栅格写 repeat(12, minmax(0, 1fr))，minmax 的 0 防止内容撑破列。自适应列表写 repeat(auto-fit, minmax(240px, 1fr))， 列数交给浏览器。组件级响应式用 container-type: inline-size 配 @container，别一律迁就视口断点。
平台 API
grid-template-columnsrepeat()minmax()gap@container代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | grid-template-columns |
| CSS | @container |
| Tailwind CSS | grid-cols-12 / @container |
相关概念
把关键数据与操作入口聚在一屏内的后台首页，用区域化网格组织：顶栏与侧栏负责导航， 中部依次铺指标卡、图表区和主表格，让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面，密度与分区方式决定了整站的阅读节奏。
页面搭配使用围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
页面搭配使用用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件搭配使用把界面装进便当盒的布局语言：一组圆角矩形像分格便当一样拼合，各格跨度不同 ——大格承载主内容，小格陈列数据与点缀，格与格之间留窄缝对齐同一套网格。 它是卡片网格的升级：用面积差异直接表达信息优先级。
风格搭配使用