网格区域定位属性

最后更新：2026-09-13

grid-area 网格区域定位属性

grid-area 是用于定位网格项的简写属性，可以同时设置 grid-row-start、grid-column-start、grid-row-end、grid-column-end 四个值。它既可以用网格线编号来精确定位，也可以引用 grid-template-areas 中定义的命名区域名称，是网格定位中最灵活的属性。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

grid-area: <grid-line> [ / <grid-line> ]{0,3};

⚙️ 取值

值	类型	描述
`<grid-line> [ / <grid-line> ]{0,3}`	值	网格区域简写

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
grid-area	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 当 grid-area 的值是区域名称时，会将该网格项放置到 grid-template-areas 中对应名称的区域。

提示： 使用四个数值时，顺序为：grid-row-start / grid-column-start / grid-row-end / grid-column-end。

❓ 常见问题

Qgrid-area 作为简写和作为属性名是同一个东西吗？

A两者不同但同名关联：属性 grid-area 用于给网格项定位，可写四个网格线值或一个区域名；而 grid-template-areas 模板中的 "header" 等字符串是区域标识符。当写 grid-area: header 时，引用的是模板中定义的命名区域，两者通过区域名连接起来。

Q命名区域和网格线编号哪种方式更好？

A没有绝对优劣。命名区域可读性最高，适合整页布局：区域名写进 grid-template-areas 后，子项只需 grid-area: header 一行定位，改布局只改容器模板。网格线编号更精细，适合局部调整跨度，如某张卡片要跨 2 列。实际项目常混用：页面骨架用命名区域，内部细节用网格线。

Qgrid-area: 1 / 1 / 3 / 3 四个值分别代表什么？

A四个值依次对应 grid-row-start / grid-column-start / grid-row-end / grid-column-end：从第 1 行第 1 列交叉点开始，到第 3 行第 3 列交叉点结束，占据 2×2 矩形。记忆顺序“行起、列起、行止、列止”，省略后面的值时自动使用 auto。