网格布局简写属性

最后更新：2026-09-13

grid 网格布局简写属性

grid 是 CSS Grid 布局的简写属性，可以一次性定义网格容器的显式轨道、自动轨道以及流动方向。它是 grid-template 和 grid-auto 系列属性的集合体，适合在需要完整描述网格结构时使用，是功能最全面的网格简写。

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

📝 语法

grid: <grid-template> | <grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]?;

⚙️ 取值

值	类型	描述
`<grid-template>`	类型	显式网格简写
`<grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]`	值	行/列简写

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

提示： grid 简写中斜线 / 前面是行轨道定义，后面是列轨道定义，与 grid-template 的写法一致。

注意： grid 简写会重置所有未显式声明的网格属性（如 grid-auto-flow），使用时需注意覆盖范围。

❓ 常见问题

Qgrid 和 grid-template 有什么不同？

Agrid 是更彻底的简写，会一次性重置显式轨道、隐式轨道和自动放置方向等所有相关子属性，适合干净初始化网格；grid-template 只设置显式轨道（rows/columns/areas），不碰 grid-auto-* 等隐式属性，副作用小，适合只调整显式结构。

Q什么时候应该用 grid 简写？

A需要一次性完整定义网格结构、或希望重置所有网格相关属性时用 grid 简写；若只想调整某一部分（比如只改列宽），改用 grid-template-columns 等单独属性，避免 grid 简写意外重置其他网格设置。团队代码里两种风格要统一，避免混用造成隐式重置。

Qgrid: 200px 1fr / 1fr 2fr 怎么写才对应行和列？

Agrid 简写中斜杠左边是 grid-template-rows（行）、右边是 grid-template-columns（列）。grid: 200px 1fr / 1fr 2fr 表示两行（200px、1fr）和两列（1fr、2fr）。记住“行在前列在后”，容易与只写 columns 的直觉相反，写完用浏览器检查。