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

CSS属性 grid-area 为一简写属性,其包含 grid-row-startgrid-column-startgrid-row-endgrid-column-end。它可以指定一个网格项目在 网格行 中的大小与位置。方式为明确网格布置的一段线(line)、或一个跨越(span)、亦可不明确任何东西(即为自动)。由此指定网格面(grid area)的边界。

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* <integer> && <custom-ident>? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;

如果指定了4个 <grid-line> 的值,grid-row-start 会被设为第一个值,grid-column-start 为第二个值, grid-row-end 为第三个值,grid-column-end 为第四个值。

当 grid-column-end 被忽略时,若 grid-column-start 为一 <custom-ident>(自定义关键字数据类型), grid-column-end 则为该 <custom-ident>;否则为 auto

grid-row-end 被忽略时,若 grid-row-start 为一 <custom-ident>grid-row-end 则为该 <custom-ident>;否则为 auto

grid-column-start 被忽略时,若 grid-row-start 为一 <custom-ident>,则所有四项普通写法的属性值均为该值。否则为 auto

网格面的属性亦可设为一 <custom-ident> 作为其名称,然后可通过 grid-template-areas 放置。

初始值as each of the properties of the shorthand:
适用元素grid items and absolutely-positioned boxes whose containing block is a grid container
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

auto
该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度(span)1自动放置。
<custom-ident> 自定义关键字数据类型
If there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement.

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-area: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).

Otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>.

<integer> && <custom-ident>?
Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

An <integer> value of 0 is invalid.

span && [ <integer> || <custom-ident> ]
Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.

形式文法

<grid-line> [ / <grid-line> ]{0,3}

where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

示例

HTML 内容

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS 内容

#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

规范

Specification Status Comment
CSS Grid Layout
grid-area
Candidate Recommendation Initial definition

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] (Yes)[3] 52.0 (52.0)[2] 未实现[3] 44[4] 10.1
Feature 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] 44 未实现

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[3] Supported as of EdgeHTML 16. Internet Explorer and Edge implement an older version of the specification, which does not define this property. See the request for updating the implementation.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

另请参见

文档标签和贡献者

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