网格 | grid (Grid Layout) - CSS 中文开发手册

gridCSS属性是一个简写属性，并将所有明确的网格特性（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-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。你没有指定的子属性被设置为它们的初始值，正如对于短手一样。此外，排水沟属性通过这种简写方式重置，即使它们不能被设置。

grid-template-rows*nonegrid-template-columns*nonegrid-template-areas*nonegrid-auto-rows*autogrid-auto-columns*autogrid-auto-flow*rowgrid-column-gap*0grid-row-gap*0

Applies to grid containers   [Inherited](inheritance) no   Percentages as each of the properties of the shorthand:

grid-template-rows*参考内容区域的相应维度grid-template-columns*参考内容区域的相应维度grid-auto-rows*参考内容区域的相应维度grid-auto-columns*参考内容区域的相应维度

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

grid-template-rows：：按规定，但相对长度转换为绝对长度grid-template-columns：：按规定，但相对长度转换为绝对长度grid-template-areas*具体规定grid-auto-rows*指定的百分比或绝对长度grid-auto-columns*指定的百分比或绝对长度grid-auto-flow*具体规定grid-column-gap*指定的百分比或绝对长度grid-row-gap*指定的百分比或绝对长度

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

句法

取值

<‘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-template‘> | <‘grid-template-rows‘> / [ auto-flow && dense? ] <‘grid-auto-columns‘>? | [ auto-flow && dense? ] <‘grid-auto-rows‘>? / <‘grid-template-columns‘>

例

HTML内容

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS内容

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

结果

规范

浏览器兼容性