CSS Grid 布局参考表

2026-04-10 28 阅读3分钟

CSS Grid 布局参考表

容器属性（作用在父元素）

属性	可选值	默认值	说明
`display`	`grid` `inline-grid`	—	定义块级或行内级网格容器
`grid-template-columns`	长度 / 百分比 / `fr` / `auto` / `minmax()` / `repeat()`	`none`	定义列宽（数量和尺寸），如 `200px 1fr 2fr`
`grid-template-rows`	同上	`none`	定义行高（数量和尺寸），如 `100px auto 1fr`
`grid-template-areas`	字符串组成的矩阵，用 `.` 表示空单元格	`none`	通过命名区域定义布局，如 `"header header" "sidebar main"`
`gap` `row-gap` `column-gap`	长度值（`20px`、`1rem`）	`0`	行间距 / 列间距。`gap` 为简写，先行后列
`justify-items`	`start` / `end` / `center` / `stretch`	`stretch`	所有项目在单元格内的水平对齐（行轴）
`align-items`	`start` / `end` / `center` / `stretch`	`stretch`	所有项目在单元格内的垂直对齐（列轴）
`place-items`	`<align-items> <justify-items>`	`stretch stretch`	简写，先垂直后水平，如 `center center`
`justify-content`	`start` / `end` / `center` / `stretch` / `space-between` / `space-around` / `space-evenly`	`start`	整个网格在容器内的水平对齐（网格总宽 < 容器时生效）
`align-content`	同上	`start`	整个网格在容器内的垂直对齐（网格总高 < 容器时生效）
`place-content`	`<align-content> <justify-content>`	`start start`	简写，先垂直后水平
`grid-auto-columns`	长度 / 百分比 / `fr` / `minmax()`	`auto`	隐式创建的列的尺寸
`grid-auto-rows`	同上	`auto`	隐式创建的行的尺寸
`grid-auto-flow`	`row` / `column` / `row dense` / `column dense`	`row`	自动布局的排列方向及是否“紧密”填充

项目属性（作用在直接子元素）

属性	可选值	默认值	说明
`grid-column`	`start / end` `span n` `start / span n`	`auto / auto`	项目占用的列范围，例：`2 / 4`、`span 2`、`2 / span 2`
`grid-row`	同上	`auto / auto`	项目占用的行范围
`grid-area`	`<row-start> / <col-start> / <row-end> / <col-end>` 或区域名称	`auto`	位置简写或引用 `grid-template-areas` 定义的名称
`justify-self`	`start` / `end` / `center` / `stretch`	`stretch`	单个项目在单元格内的水平对齐（覆盖容器 `justify-items`）
`align-self`	`start` / `end` / `center` / `stretch`	`stretch`	单个项目在单元格内的垂直对齐（覆盖容器 `align-items`）
`place-self`	`<align-self> <justify-self>`	`stretch stretch`	简写，先垂直后水平，如 `center end`

常用函数与关键字速查

函数/关键字	语法示例	说明
`fr`	`1fr`、`2fr`	剩余空间分数单位，类似 Flexbox 的 `flex-grow`
`minmax()`	`minmax(100px, 1fr)`	定义尺寸范围（最小，最大），用于响应式轨道
`repeat()`	`repeat(3, 1fr)`	简化重复轨道定义，可嵌套 `minmax()`
`auto-fill`	`repeat(auto-fill, 200px)`	尽可能多地放置轨道（不拉伸），空轨道保留空间
`auto-fit`	`repeat(auto-fit, 200px)`	放置轨道后拉伸现有轨道填满容器，空轨道折叠
`span`	`grid-column: span 2`	跨越指定数量的轨道，不指定起始线

对齐方式速查（区分容器级与项目级）

作用对象	水平对齐属性	垂直对齐属性	简写
所有项目在单元格内	`justify-items`	`align-items`	`place-items`
单个项目在单元格内	`justify-self`	`align-self`	`place-self`
整个网格在容器内	`justify-content`	`align-content`	`place-content`

关键点：

justify-* 控制行轴（水平），align-* 控制列轴（垂直）。

*-items / *-self 控制项目在单元格内的位置，*-content 控制整个网格在容器内的位置。

隐式网格 vs 显式网格

类型	定义属性	说明
显式网格	`grid-template-rows` `grid-template-columns`	开发者明确指定的行/列轨道
隐式网格	`grid-auto-rows` `grid-auto-columns`	当项目超出显式范围时自动生成的额外轨道，尺寸由 `grid-auto-*` 决定

触发隐式网格的常见情况：

使用 grid-row: 4 但显式只定义了 3 行。
自动布局的项目数量多于显式网格单元格数（配合 grid-auto-flow）。

浏览器兼容性简表

浏览器	最低支持版本	备注
Chrome	57+	完全支持
Firefox	52+	完全支持
Safari	10.1+	完全支持
Edge	16+	完全支持
IE 10 / 11	部分支持（旧语法 `-ms-`）	不推荐用于现代项目，存在大量 bug