| 容器 |
|---|
| grid | inline-grid | 将该元素变为 grid 容器。 |
| 1fr 1fr | repeat(3, 1fr) | 200px 1fr | 定义列及其宽度。 |
| auto 1fr auto | 定义行及其高度。 |
| [main-start] 1fr [main-end] | 在模板中为网格线命名，并按这些名称放置项目。 |
| 1rem | 8px 16px | 行与列之间的间距。 |
| "header header" "nav main" | 为单元格命名，让放置代码更易读。 |
| "head head" 64px "nav main" 1fr / 200px 1fr | 用一个简写同时设置行、列和区域。 |
| repeat(2, 1fr) / auto-flow 80px | 在一条声明中设置所有轨道属性和 grid-auto-flow。 |
| minmax(80px, auto) | 设置模板未定义的行的高度。 |
| 120px | minmax(0, 1fr) | 设置模板未定义的列的宽度。 |
| row | column | row dense | 为未放置的项目选择排列轴；dense 会回填先前的空隙。 |
| start | center | end | stretch | 沿行轴对齐单元格内的每个项目。 |
| start | center | end | stretch | 沿列轴对齐单元格内的每个项目。 |
| center | start end | 在一条声明中同时设置 align-items 和 justify-items。 |
| start | center | space-between | 沿行轴在容器内对齐轨道网格。 |
| start | center | space-between | 沿列轴在容器内对齐轨道网格。 |
| center | end start | 在一条声明中同时设置 align-content 和 justify-content。 |
| 项目 |
|---|
| 1 / 3 | span 2 | 按列放置项目，或让它跨越多列。 |
| 1 / 2 | span 3 | 按行放置项目，或让它跨越多行。 |
| grid-column: 2 / -1 | 从网格末端倒数计数；-1 是最后一条网格线。 |
| header | 1 / 1 / 2 / 3 | 用一个简写为项目命名或完整定位。 |
| start | center | end | stretch | 沿行轴在单元格内对齐这一个项目。 |
| start | center | end | stretch | 沿列轴在单元格内对齐这一个项目。 |
| center | start end | 在一条声明中同时设置 align-self 和 justify-self。 |
| 尺寸单位 |
|---|
| 1fr | 2fr | 轨道中剩余空间的一个份数。 |
| auto | 1fr auto | 按内容确定轨道大小；对齐可以将其拉伸。 |
| min-content | max-content | 按最小内容或最大内容确定轨道大小。 |
| fit-content(180px) | 按内容确定轨道大小，但不超过给定的上限。 |
| minmax(200px, 1fr) | 将轨道限制在最小值与最大值之间。 |
| repeat(4, 1fr) | 重复轨道模式，无需逐一书写。 |
| repeat(auto-fit, minmax(120px, 1fr)) | 添加尽可能多的轨道；auto-fit 会折叠空轨道。 |
| grid-template-columns: subgrid | 让嵌套网格共享父网格的轨道和线名。 |
| grid-template-rows: masonry | 实验性：按高度将项目打包进列，而不是固定行。 |