这篇翻译不完整。请帮忙从英语翻译这篇文章

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-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 属性中声明显式或隐式网格。与其他简写属性同样,若有次级属性未被声明,其将使用初始值。另外,尽管此简写声明无法设置网格的槽(gutter),槽会被该声明重置。

初始值as each of the properties of the shorthand:
适用元素grid containers
是否是继承属性
Percentagesas each of the properties of the shorthand:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

<'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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] (Yes)[2] 52.0 (52.0)[3] 未实现[4] 44[5] 10.1
特性 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57.0[1] 57.0[1] (Yes) 52.0 (52.0)[2] 未实现[3] 10.3

[1] Chrome 29.0 之后可在 chrome://flags 中启用实验性网络平台功能的相关 flag 来实现。

[2] EdgeHTML 16 中无需前缀。之前的 Build Number 10240+ 或 IE11 中需附有供应商前缀。无前缀版本:Windows Insider Preview Build 16237+ (平台状态)。

[3] Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37) 以后和通过开启设置 layout.css.grid.enabled 来实现,其默认值为 false。自从 Gecko 52.0 开始默认值为 enabled

[4] Internet Explorer 11 中实现了 旧版本规范,没有定义 grid  简写,并需供应商前缀。请参考 request for updating the implementation 和 platform status

[5] Opera 28.0 之后可在 opera://flags 中启用实验性网络平台功能的相关 flag 来实现。

其他参考

文档标签和贡献者

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