网格 | grid

grid

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

初始值	as each of the properties of the shorthand: grid-template-rows: none grid-template-columns: none grid-template-areas: none grid-auto-rows: auto grid-auto-columns: auto grid-auto-flow: row grid-column-gap: 0 grid-row-gap: 0
应用于	grid containers
是否继承	no
百分比	as each of the properties of the shorthand: grid-template-rows: refer to corresponding dimension of the content area grid-template-columns: refer to corresponding dimension of the content area grid-auto-rows: refer to corresponding dimension of the content area grid-auto-columns: refer to corresponding dimension of the content area
适用媒体	visual
计算值	as each of the properties of the shorthand: grid-template-rows: as specified, but with relative lengths converted into absolute lengths grid-template-columns: as specified, but with relative lengths converted into absolute lengths grid-template-areas: as specified grid-auto-rows: the percentage as specified or the absolute length grid-auto-columns: the percentage as specified or the absolute length grid-auto-flow: as specified grid-column-gap: the percentage as specified or the absolute length grid-row-gap: the percentage as specified or the absolute length
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

grid-template-rows*none

grid-template-columns*none

grid-template-areas*none

grid-auto-rows*auto

grid-auto-columns*auto

grid-auto-flow*row

grid-column-gap*0

grid-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;
}

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57.01	No support3	52.0 (52.0)2	No support3	444	10.1

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.01	57.01	52.0 (52.0)2	No support3		10.3