initial commit

1 files changed, 197 insertions, 0 deletions

diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html
new file mode 100644
index 0000000000..9363bb9e1e
--- /dev/null
+++ b/files/zh-tw/web/css/grid-template/index.html
@@ -0,0 +1,197 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+translation_of: Web/CSS/grid-template
+---
+<p><font><font>的</font></font><strong><code>grid-template</code></strong><font><font>CSS屬性是一個</font></font><a href="/en-US/docs/Web/CSS/Shorthand_properties"><font><font>速記屬性</font></font></a><font><font>，用於定義{{詞彙表（“網格列”，“網格列”）}}，{{詞彙表（“網格行”，“行”）}}，和{{詞彙表（“格狀區“，” area“）}}。</font></font></p>
+
+<div><font><font>{{EmbedInteractiveExample（“ pages / css / grid-template.html”）}}</font></font></div>
+
+<p class="hidden"><font><font>該交互式示例的源存儲在GitHub存儲庫中。</font><font>如果您想為交互式示例項目做出貢獻，請克隆</font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font>並向我們發送請求請求。</font></font></p>
+
+<p><font><font>作者可以為長期屬性設置值：{{cssxref（“ grid-template-rows”）}}，{{cssxref（“ grid-template-columns”）}}和{{cssxref（“ grid-template-areas “）}}。</font></font></p>
+
+<h2 id="句法"><font><font>句法</font></font></h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword value */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns values */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column values */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Global values */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="價值觀"><font><font>價值觀</font></font></h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font><font>是將所有三個長期屬性設置為的關鍵字</font></font><code>none</code><font><font>，表示沒有顯式網格。</font><font>沒有命名的網格區域。</font><font>行和列將隱式生成；</font><font>它們的大小將由{{cssxref（“ grid-auto-rows”）}}和{{cssxref（“ grid-auto-columns”）}}屬性確定。</font></font></dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd><font><font>將{{cssxref（“ grid-template-rows”）}}和{{cssxref（“ grid-template-columns”）}}設置為指定值，並設置{{cssxref（“ grid-template-areas”）} }至</font></font><code>none</code><font><font>。</font></font></dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code></dt>
+ <dd>Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in <code>auto</code> for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (or <code>none</code>, if not specified).<br>
+
+ <p class="note">Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>Note:</strong> The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use <code>grid</code> (as opposed to <code>grid-template</code>) to prevent these values from cascading in seperately.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8] notranslate">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-area: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html notranslate">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</p>
+
+<h2 id="Specifications">Specifications</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-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</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"><font><font>網格自動列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow"><font><font>網格自動流</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows"><font><font>網格自動行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column"><font><font>網格列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end"><font><font>網格列端</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap"><font><font>網格列間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start"><font><font>網格列開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap"><font><font>網格間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end"><font><font>網格行尾</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap"><font><font>網格行間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start"><font><font>網格行開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template"><font><font>網格模板</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas"><font><font>網格模板區域</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns"><font><font>網格模板列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows"><font><font>網格模板行</font></font></a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong><font><font>詞彙表</font></font></strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines"><font><font>網格線</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks"><font><font>網格軌道</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell"><font><font>網格單元</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas"><font><font>網格區域</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters"><font><font>天溝</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column"><font><font>網格列</font></font></a></li>
+  </ol>
+ </li>
+</ol>
+</section>