grid-template
=============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
**`grid-template`** は CSS のプロパティで、一括指定プロパティとして グリッド列、グリッド行、グリッド領域 を定義します。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
構文
--


```css
/\* キーワード値 \*/
grid-template: none;

/\* grid-template-rows / grid-template-columns の値 \*/
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 の値 \*/
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;

/\* グローバル値 \*/
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;
```

### 値

`none`

3 個すべてのプロパティの値に `none` を設定するキーワードで、明示的なグリッドがないことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは `grid-auto-rows` および `grid-auto-columns` プロパティによって決定されます。

`<'grid-template-rows'> / <'grid-template-columns'>`

`grid-template-rows` および `grid-template-columns` に特定の値を設定し、`grid-template-areas` の値に `none` を設定します。

`[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`

`grid-template-areas` にリストの文字列を設定し、`grid-template-rows` にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、`grid-template-columns` にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。

**メモ:** これらのトラックリストに `repeat()` 関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。



**メモ:** `grid` 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、（`grid-template` ではなく） `grid` を使用してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-template-columns`: `none`
* `grid-template-rows`: `none`
* `grid-template-areas`: `none`
 |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `grid-template-columns`: コンテンツ領域の対応する寸法に対する相対値
* `grid-template-rows`: コンテンツ領域の対応する寸法に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `grid-template-columns`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-rows`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-areas`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `grid-template-columns`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-rows`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-areas`: 離散値
 |

形式文法
----
```

grid-template =   
  none                                                |  
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |  
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?    
  
<line-names> =   
  '[' <custom-ident>\* ']'    
  
<track-size> =   
  <track-breadth>                                   |  
  minmax( <inflexible-breadth> , <track-breadth> )  |  
  fit-content( <length-percentage [0,∞]> )            
  
<explicit-track-list> =   
  [ <line-names>? <track-size> ]+ <line-names>?    
  
<track-breadth> =   
  <length-percentage [0,∞]>  |  
  <flex [0,∞]>               |  
  min-content                |  
  max-content                |  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  |  
  min-content                |  
  max-content                |  
  auto                         
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### グリッドテンプレートの定義

#### CSS


```css
#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;
}
```


#### HTML


```html
<section id="page">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メイン領域</main>
  <footer>フッター</footer>
</section>
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連する CSS プロパティ: `grid-template-rows`, `grid-template-columns`, `grid-template-areas`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* グリッドレイアウトガイド: グリッドテンプレート領域 - グリッド定義の一括指定
* 動画チュートリアル: *Grid Template shorthand*