CSS3

：

プロパティ

：

grid-template

　編集：2022.07.14 by T.A.

格子（grid）： column、row、areaの定義：略式プロパティ。

名前	`grid-template`
値	none \| [<'grid-template-rows'> `/` <'grid-template-columns'>] \| [<line-names>? <string> <track-size>? <line-names>?]+ [`/` <explicit-track-list>]?
初期値	none
適用対象	格子コンテナ
継承	個々のプロパティを見よ
百分率	個々のプロパティを見よ
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

grid-template プロパティは、［grid-template-rows、grid-template-columns、grid-template-areas］を、単独の宣言で一括して設定するための略式プロパティである。

none

すべての下位プロパティを、それぞれの初期値（none）に設定する。

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

順に、［grid-template-rows、grid-template-columns］を指定された値に設定し、grid-template-areas は none に設定する。

次のものは：

grid-template: auto 1fr / auto 1fr auto;

次と等価になる：

grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;

<DIV style="border:1px solid red;
 display:grid;
 grid-template:50px 70px/40px 60px 80px;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
 <DIV style="border:1px solid black">４</DIV>
 <DIV style="border:1px solid black">５</DIV>
</DIV>

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

<string>：区画名。

grid-template-areas を、［リストされている文字列（<string>）の並び］に設定する。
grid-template-rows を、次を順に施した結果に設定する：
<string> すべてを値から取り除く；
<explicit-track-list> が在れば直前のスラッシュとともに値から取り除く；
<track-size> が抜けている所には auto を補う；
2 個の <track-size> に挟まれた連続する 2 個の <line-names> は、1 つに継ぎ合せる
grid-template-columns を、（スラッシュの後の）筋リスト（<explicit-track-list> ）が指定されて［いればそれ／いなければ none ］に設定する。

この構文は、コードの中で、一連の筋名とサイズを、それぞれに対応する区画に揃えて記せるように設計されている。

次のものは：

grid-template:
    [header-top] "a   a   a"       [header-bottom]
      [main-top] "b   b   b"   1fr [main-bottom]
              / auto 1fr auto;

次と等価になる：

grid-template-areas:
                 "a   a   a"
                 "b   b   b";
grid-template-rows:
    [header-top]              auto [header-bottom]
      [main-top]               1fr [main-bottom];
grid-template-columns:
                auto 1fr auto;

したがって、次のような格子を作成する：

上の宣言により作成される格子。（＊-start／＊-end は、有名区画により暗黙的にあてがわれる罫名。）

注記： repeat() 関数は、これらの筋リストには許容されない ― 各筋と、“ASCII アート”内の各“筋”とは、視覚的に一対一に揃うよう意図されているので。

<DIV style="border:1px solid red;
 display:grid;
 grid-template:50px 70px/[a] 40px [b] 60px [c] 80px [d];
">
 <DIV style="grid-column:b/d; border:1px solid black">1</DIV>
 <DIV style="grid-row:1/3; border:1px solid black">2</DIV>
 <DIV style="grid-row:2; grid-column:2/d; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red;
 display:grid;
 grid-template:'a b c' 50px
	'd e f' 70px/40px 60px 80px;
">
 <DIV style="grid-column:b/c; border:1px solid black">1</DIV>
 <DIV style="grid-row:a/d; border:1px solid black">2</DIV>
 <DIV style="grid-row:d; grid-column:2/f; border:1px solid black">3</DIV>
</DIV>

注記： grid 略式プロパティも同じ構文を受容する ― それは、暗黙的な格子プロパティも、それぞれの初期値に設定し直す。したがって作者には、これらを別々にカスケードさせたいときは別として、grid-template よりも grid を利用することが推奨される。

<line-names>

＝[<custom-ident>* ]

「[ ]」で罫名を括って指定する。

<DIV style="border:1px solid red;
 display:grid;
 grid-template:[r1] 50px [r2] 70px [r3]/[a] 40px [b] 60px [c] 80px [d];
">
 <DIV style="grid-column:b/d; border:1px solid black">1</DIV>
 <DIV style="grid-row:r1/r3; border:1px solid black">2</DIV>
 <DIV style="grid-row:r2; grid-column:b; border:1px solid black">3</DIV>
</DIV>

<track-size>

＝<track-breadth>
| minmax(<inflexible-breadth> , <track-breadth> )
| fit-content(<length-percentage>)

<DIV style="border:1px solid red; width:200px;;
 display:grid;
 grid-template:50px minmax(30px,70px)/50px 40% auto;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:180px; height:50px;;
 display:grid;
 grid-template:50px minmax(30px,70px)/50px 40% auto;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<track-breadth>

＝<length-percentage> | <flex> | min-content | max-content | auto

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template:[stat] 'a b c' 50px [en]
	'd e f' 70px;
">
 <DIV style="grid-column:2; border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 display:grid;
 grid-template:[stat] 'a b c' 50px [en]
	'd e f' min-content;
">
 <DIV style="grid-column:2; border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 display:grid;
 grid-template:[stat] 'a b c' 50px [en]
	'd e f' max-content;
">
 <DIV style="grid-column:2; border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:120px;
 display:grid;
 grid-template:[stat] 'a b c' 50px [en]
	'd e f' auto;
">
 <DIV style="grid-column:2; border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<explicit-track-list>

＝[<line-names>? <track-size>]+ <line-names>?

<DIV style="border:1px solid red;
 display:grid;
 grid-template:
	'a a a' 50px
	'b b c' 70px
	/50px 70px 100px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

minmax() ○

＝minmax(<inflexible-breadth>, <track-breadth>)

<DIV style="border:1px solid red; width:150px; height:50px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' minmax(40px,70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:150px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' minmax(40px,70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<inflexible-breadth>

＝<length-percentage> | min-content | max-content | auto

<DIV style="border:1px solid red; width:150px; height:90px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' minmax(min-content,70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:60px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' minmax(max-content,70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' minmax(auto,70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

fit-content() ○

＝fit-content(<length-percentage>)

max( 最小, min( 上限, max-content ) ) を表現する ― ここで、最小は auto による最小を表現する（これは、min-content による最小に等しくなることが多いが、常にではない）／上限は fit-content() の引数に渡された筋サイズ法関数。これは、本質的には、min( minmax(auto, max-content), minmax(auto, 上限) ) として計算される。

<DIV style="border:1px solid red; width:150px; height:150px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' fit-content(70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px;
 display:grid;
 grid-template:'a a a' 50px
	'b b c' fit-content(70px);
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
 <DIV style="border:1px solid black">4</DIV>
</DIV>

テスト

HTML：

ここに表示

スクリプト：

スクリプト：

表示内容：