此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
grid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年10月.
grid 是一个 CSS 简写属性，可以用来设置以下属性：显式网格属性grid-template-rows、grid-template-columns 和grid-template-areas，隐式网格属性grid-auto-rows、grid-auto-columns 和grid-auto-flow，间距属性grid-column-gap 和grid-row-gap。
尝试一下
grid: auto-flow / 1fr 1fr 1fr;grid: auto-flow dense / 40px 40px 1fr;grid: repeat(3, 80px) / auto-flow;<section> <div> <div> <div>One</div> <div>Two</div> <div>Three</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; grid-gap: 10px; width: 200px;}#example-element :nth-child(1) { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue;}#example-element :nth-child(2) { background-color: rgba(255, 0, 200, 0.2); border: 3px solid rebeccapurple; grid-column: auto / span 3; grid-row: auto / span 2;}#example-element :nth-child(3) { background-color: rgba(94, 255, 0, 0.2); border: 3px solid green; grid-column: auto / span 2;}备注：你仅可在一个grid 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。
语法
css
/* <'grid-template'> values */grid: none;grid: "a" 100px "b" 1fr;grid: [linename1] "a" 100px [linename2];grid: "a" 200px "b" min-content;grid: "a" minmax(100px, max-content) "b" 20%;grid: 100px / 200px;grid: minmax(400px, min-content) / repeat(auto-fill, 50px);/* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? values */grid: 200px / auto-flow;grid: 30% / auto-flow dense;grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;/* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> values */grid: auto-flow / 200px;grid: auto-flow dense / 30%;grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);grid: auto-flow dense 40% / [line1] minmax(20em, max-content);/* Global values */grid: inherit;grid: initial;grid: unset;值
<'grid-template'>定义了
grid-template，其包含grid-template-columns，grid-template-rows和grid-template-areas。<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?通过grid-template-rows属性显式设置行轨道来设置自动流（grid-template-columns属性设为none），并通过grid-auto-columns明确该如何自动重复列轨道（同时grid-auto-rows属性设为 auto）。grid-auto-flow属性也被相应的设置为column，并可附有 dense。所有其余
grid次级属性被重置为初始值。[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>通过
grid-template-columns属性显式设置列轨道来设置自动流（grid-template-rows属性设为none），并通过grid-auto-rows明确该如何自动重复行轨道（同时grid-auto-columns属性设为auto）。grid-auto-flow属性也被相应的设置为row，并可附有 dense。所有其余grid次级属性被重置为初始值。
标准语法
grid =
<'grid-template'>|
<'grid-template-rows'> /[auto-flow&&dense?]<'grid-auto-columns'>?|
[auto-flow&&dense?]<'grid-auto-rows'>? /<'grid-template-columns'>
<grid-template> =
none|
[<'grid-template-rows'> /<'grid-template-columns'>]|
[<line-names>?<string><track-size>?<line-names>?]+[ /<explicit-track-list>]?
<grid-template-rows> =
none|
<track-list>|
<auto-track-list>|
subgrid<line-name-list>?
<grid-auto-columns> =
<track-size>+
<grid-auto-rows> =
<track-size>+
<grid-template-columns> =
none|
<track-list>|
<auto-track-list>|
subgrid<line-name-list>?
<line-names> =
'['<custom-ident>* ']'
<track-size> =
<track-breadth>|
minmax(<inflexible-breadth> ,<track-breadth>)|
fit-content(<length-percentage [0,∞]>)
<explicit-track-list> =
[<line-names>?<track-size>]+<line-names>?
<track-list> =
[<line-names>?[<track-size>|<track-repeat>]]+<line-names>?
<auto-track-list> =
[<line-names>?[<fixed-size>|<fixed-repeat>]]*<line-names>?<auto-repeat>[<line-names>?[<fixed-size>|<fixed-repeat>]]*<line-names>?
<line-name-list> =
[<line-names>|<name-repeat>]+
<track-breadth> =
<length-percentage [0,∞]>|
<flex [0,∞]>|
min-content|
max-content|
auto
<inflexible-breadth> =
<length-percentage [0,∞]>|
min-content|
max-content|
auto
<length-percentage> =
<length>|
<percentage>
<track-repeat> =
repeat([<integer [1,∞]>] ,[<line-names>?<track-size>]+<line-names>?)
<fixed-size> =
<fixed-breadth>|
minmax(<fixed-breadth> ,<track-breadth>)|
minmax(<inflexible-breadth> ,<fixed-breadth>)
<fixed-repeat> =
repeat([<integer [1,∞]>] ,[<line-names>?<fixed-size>]+<line-names>?)
<auto-repeat> =
repeat([auto-fill|auto-fit] ,[<line-names>?<fixed-size>]+<line-names>?)
<name-repeat> =
repeat([<integer [1,∞]>|auto-fill] ,<line-names>+)
<fixed-breadth> =
<length-percentage [0,∞]>
实例
HTML
html
<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>CSS
css
#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px;}#container > div { background-color: #8ca0ff; width: 50px; height: 50px;}结果
规范
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-shorthand |