📋 CSS Grid 一览表（默认值 + 可选值）
1. 容器属性（Grid Container）
| 属性 | 默认值 / 可选值 | 说明 |
|---|---|---|
| display | block → grid / inline-grid | 定义网格容器 |
| grid-template-columns | none → 长度 / 百分比 / fr / repeat() / minmax() | 定义列宽 |
| grid-template-rows | none → 长度 / 百分比 / fr / repeat() / minmax() | 定义行高 |
| grid-template-areas | none → 字符串区域 | 命名区域布局 |
| grid-auto-rows | auto → 长度 / minmax() | 隐式生成行的高度 |
| grid-auto-columns | auto → 长度 / minmax() | 隐式生成列的宽度 |
| grid-auto-flow | row → row / column / row dense / column dense | 自动放置方向与填充策略 |
| gap | 0 → 长度 | 行列间距（简写） |
| row-gap | 0 → 长度 | 行间距 |
| column-gap | 0 → 长度 | 列间距 |
2. 容器对齐
| 属性 | 默认值 / 可选值 | 说明 |
|---|---|---|
| justify-items | stretch → start / end / center / stretch | 所有项目水平对齐方式 |
| align-items | stretch → start / end / center / stretch | 所有项目垂直对齐方式 |
| place-items | — → align justify | align-items + justify-items 简写 |
| justify-content | start → start / end / center / space-between / space-around / space-evenly | 网格整体水平分布 |
| align-content | start → start / end / center / space-between / space-around / space-evenly | 网格整体垂直分布 |
| place-content | — → align justify | align-content + justify-content 简写 |
3. 项目属性（Grid Item）
| 属性 | 默认值 / 可选值 | 说明 |
|---|---|---|
| grid-column-start | auto → 数字 / 名称 / span n | 起始列线 |
| grid-column-end | auto → 数字 / 名称 / span n | 结束列线 |
| grid-row-start | auto → 数字 / 名称 / span n | 起始行线 |
| grid-row-end | auto → 数字 / 名称 / span n | 结束行线 |
| grid-column | — → start / end | 列范围（简写） |
| grid-row | — → start / end | 行范围（简写） |
| grid-area | — → 区域名 / 行列范围 | 指定区域或位置 |
| justify-self | stretch → start / end / center / stretch | 单元格内水平对齐 |
| align-self | stretch → start / end / center / stretch | 单元格内垂直对齐 |
| place-self | — → align justify | align-self + justify-self 简写 |
4. 常用函数
| 函数 | 说明 |
|---|---|
| repeat(n, value) | 重复定义轨道 |
| minmax(min, max) | 定义最小与最大尺寸 |
| auto-fit | 自动填充并拉伸项目以填满空间 |
| auto-fill | 自动填充但不强制拉伸 |
📐 对齐方式速查
- align-content / justify-content: 作用于整个网格
start/end/center/stretch/space-between/space-around/space-evenly
- align-items / justify-items: 作用于单元格内所有项目
start/end/center/stretch
- align-self / justify-self: 单独控制某个项目
start/end/center/stretch
图示1
图示2
