grid 是一个CSS简写属性,可以用来设置以下属性:
显式网格属性 grid-template-rowsgrid-template-columns 和 grid-template-areas
隐式网格属性 grid-auto-rowsgrid-auto-columns 和  grid-auto-flow
间距属性 grid-column-gap 和 grid-row-gap

注意:您仅可在一个 grid 属性中声明显式或隐式网格。与其他简写属性同样,若有次级属性未被声明,其将使用初始值。另外,尽管此简写声明无法设置网格的槽(gutter),槽会被该声明重置。

语法

/* <'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-columnsgrid-template-rowsgrid-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 Layout
grid
Candidate Recommendation Initial definition

浏览器兼容

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.3

6.0

6.04

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

4. This was added early so is out of sync with the equivalent Chromium version.

参见

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, huasheng, BingqiChen
最后编辑者: zhangchen,