grid-template CSS プロパティは grid columns と rowsareas を定義するための 簡略表記 です。

/* 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;

grid-template-rows や grid-template-columnsgrid-template-areas といったプロパティの値を設定できます。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象grid containers
継承不可
相対値の基準以下の各プロパティのショートハンドとして補完します:
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

Syntax

Values

none
3つのプロパティの値を none に設定します。これは明示的なグリッドがないことを表します。名前付き grid areas はありません。行と列は暗黙的に生成されます。それらの大きさは grid-auto-rows と grid-auto-columns プロパティによって決まります。
<'grid-template-rows'> / <'grid-template-columns'>
grid-template-rowsgrid-template-columns に値を設定し、grid-template-areas には none を設定します。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
リストされた grid-template-areas 文字列ごとに grid-template-rows を track sizes に設定します(不明な値はauto になります)。また、名前付き行は各サイズの前後に定義し、grid-template-columns はスラッシュの後ろに指定します(指定しなかった場合は none)。
 

Note: repeat 関数をここで使うことはできません。トラックが “ASCII art” の行列と1対1 で視覚的に並んでいるためです。

Note: grid 簡略表記は同じ構文を持ちますが、暗黙のグリッドプロパティを初期値にリセットします。これらの値が別々にカスケードされないよう grid を使います(grid-template とは対照的に)。

Formal syntax

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where
<length-percentage> = <length> | <percentage>

Examples

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-column: foot;
}

HTML

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

Result

Specifications

Specification Status Comment
CSS Grid Layout
grid-template の定義
勧告候補 Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] (有)[3] 52.0 (52.0)[2] 未サポート[3] 44[4] 未サポート[5]
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57.0[1] 57.0[1] (有) 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 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) the fit-content() function is supported. And since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) the preference is enabled by default.

[3] Supported as of EdgeHTML 16. Internet Explorer and Edge implement an older version of the specification, which doesn't define this shorthand property.

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

[5] Experimental implementation available in Safari Technological Preview.

See also

ドキュメントのタグと貢献者

 このページの貢献者: uknmr
 最終更新者: uknmr,