path: root/files/zh-tw/web/css/grid-template/index.html

---
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>，用於定義{{glossary("grid column","grid columns")}}，{{glossary("grid rows","rows")}}，和{{glossary("grid areas","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>