CSS Grid 布局参考表

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