initial commit

1 files changed, 277 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html
new file mode 100644
index 0000000000..f3b85e611d
--- /dev/null
+++ b/files/zh-cn/web/css/grid-area/index.html
@@ -0,0 +1,277 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+tags:
+  - CSS
+  - CSS 网格
+  - grid
+translation_of: Web/CSS/grid-area
+---
+<p>CSS 属性 <strong><code>grid-area</code></strong> 是一种对于 {{cssxref("grid-row-start")}}、{{cssxref("grid-column-start")}}、{{cssxref("grid-row-end")}} 和 {{cssxref("grid-column-end")}} 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 {{glossary("grid rows", "grid row")}} 中指定一个网格项的大小和位置，继而确定 {{glossary("grid areas", "grid area")}} 的边界。</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* &lt;custom-ident&gt; values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? values */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] 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;
+</pre>
+
+<p>如果指定了4个 <code>&lt;grid-line&gt;</code> 的值，<code>grid-row-start</code> 会被设为第一个值，<code>grid-column-start</code> 为第二个值， <code>grid-row-end</code> 为第三个值，<code>grid-column-end</code> 为第四个值。</p>
+
+<p>当 <code>grid-column-end</code> 被忽略时，若 <code>grid-column-start</code> 为一 {{cssxref("&lt;custom-ident&gt;")}}（自定义关键字数据类型）， <code>grid-column-end</code> 则为该 <code>&lt;custom-ident&gt;</code>；否则为 <code>auto</code>。</p>
+
+<p>当 <code>grid-row-end</code> 被忽略时，若 <code>grid-row-start</code> 为一 <code>&lt;custom-ident&gt;</code>，<code>grid-row-end</code> 则为该 <code>&lt;custom-ident&gt;</code>；否则为 <code>auto</code>。</p>
+
+<p>当 <code>grid-column-start</code> 被忽略时，若 <code>grid-row-start</code> 为一 <code>&lt;custom-ident&gt;</code>，则所有四项普通写法的属性值均为该值。否则为 <code>auto</code>。</p>
+
+<p>网格面的属性亦可设为一 {{cssxref("&lt;custom-ident&gt;")}} 作为其名称，然后可通过 {{cssxref("grid-template-areas")}} 放置。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* &lt;custom-ident&gt; values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? values */
+grid-area:  4 some-grid-area;
+grid-area:  4 some-grid-area / 2 another-grid-area;
+
+/* span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] 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;</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）<code>1</code>自动放置。</dd>
+ <dt><code>&lt;custom-ident&gt;</code> 自定义关键字数据类型</dt>
+ <dd>如果存在以 '<code>&lt;custom-ident&gt;-start</code>'/'<code>&lt;custom-ident&gt;-end</code>' 命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。
+ <p class="note"><strong>注意:</strong> 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 <code>grid-row: foo;</code> 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 <code>foo-start</code>/<code>foo-end</code> 命名的其他基线）。</p>
+
+ <p>否则，它就会被当作整数 <code>1</code> 与 <code>&lt;custom-ident&gt;</code> 一起指定。</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{cssxref("&lt;custom-ident&gt;")}}</span>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。</dd>
+ <dd>{{cssxref("integer")}} 值不能为 <code>0</code>。</dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是
+ <p>{{cssxref("&lt;custom-ident&gt;")}}，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。</p>
+ </dd>
+ <dd>
+ <p>如果忽略 &lt;integer&gt; ，它就默认设为 <code>1</code>。它的值也不能为0。</p>
+ </dd>
+</dl>
+
+<h3 id="形式文法">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML_内容">HTML 内容</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_内容">CSS 内容</h3>
+
+<pre class="brush: css; highlight[9]">#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;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOpera(44)}}<sup>[4]</sup></td>
+   <td>{{CompatSafari("10.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0.</p>
+
+<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p>
+
+<p>[3] Supported as of EdgeHTML 16. Internet Explorer and Edge implement an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span">older version of the specification</a>, which does not define this property. See the <a class="external external-icon" href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p>
+
+<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p>
+
+<h2 id="另请参见">另请参见</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>