CSS3

プロパティ

grid-template-columns、grid-template-rows

→●、mdn（grid-template-columns、grid-template-rows）

格子： 明示的な筋のサイズ法。

［grid-template-columns／ grid-template-rows］プロパティは、格子の一連の［column／row］に対し、スペース等で分離された 筋リスト（<track-list>）として、格子の［罫名、および 筋サイズ法関数］を指定する。

none

このプロパティからは、明示的な格子を成す筋は作成されないことを指示する（それでも、明示的な格子筋は grid-template-areas プロパティにより作成され得る）。

注記： 明示的な格子が無い下では、どの［row／column］も 暗黙的に生成され、それらのサイズは［grid-auto-rows／grid-auto-columns］プロパティから決定されることになる。

<DIV style="border:1px solid red;
 display:grid;
 grid-template-columns:40px 60px 80px;
 grid-template-rows:none;
">
 <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-list>

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

筋リストを、一連の［筋サイズ法関数、罫名］として指定する。各 筋サイズ法関数 は：

• 次のいずれかとして指定できる：
  • 長さ（<length>）
  • 格子コンテナのサイズに対する百分率（<percentage>）
  • 筋を占める内容の測定（min-content、max-content）
  • 格子の中の free 空間の割合分（<flex>）

  【このリストの和集合は、下の構文の <track-breadth>（から値 auto は除いたもの）に該当する。】

• または、minmax() 記法による範囲として指定できる ― その［min、max］引数に、前項に挙げたいずれかの筋サイズ法関数を与えて。 これらの引数は、順に［min 筋サイズ法関数、max 筋サイズ法関数］を与えることになる。

<DIV style="border:1px solid red;
 display:grid;
 grid-template-columns:40px 60px 80px 100px;
 grid-template-rows:none;
">
 <DIV style="grid-column:2/4; border:1px solid black">1</DIV>
</DIV>

<DIV style="border:1px solid red;
 display:grid;
 grid-template-columns:[L] 40px [L] 60px [L] 80px [L] 100px [L];
 grid-template-rows:none;
">
 <DIV style="grid-column:L 2/L 4; border:1px solid black">1</DIV>
</DIV>

<auto-track-list>

＝[ <line-names>? [<fixed-size> | <fixed-repeat>] ]*
<line-names>? <auto-repeat>
[ <line-names>? [<fixed-size> | <fixed-repeat>] ]*
<line-names>?

<track-list> の説明を参照。

<DIV style="border:1px solid red;
 display:grid;
 grid-template-areas:'a b c d';
 grid-template-columns:repeat(auto-fill,50px);
 grid-template-rows:none;
">
 <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>

普通に「50px」の方が良いような。

subgrid <line-name-list>? [Edge]⛌

subgrid 値は、この値が入れ子な格子 コンテナ の［ grid-template-columns に指定された場合は コンテナ の column ／ grid-template-rows に指定された場合は コンテナ の row ］軸を 下位格子化 することを指示する【コンテナ は、その軸に関して下位格子になる】：

• コンテナは、下位格子化された軸において［格子アイテムとしての コンテナ が親格子内でスパンする部位］を受け入れることになる。
• コンテナ の下位格子化された各筋のサイズは、明示的に指定されることなく、親格子の定義から採られる。
• コンテナ 内の各アイテムは、親格子と共有される筋の内在的サイズの計算に関与することになる（§ 内在的な筋サイズを解決する）。

【コンテナ が直交フローを確立している場合、下位格子化される［column／row］は、コンテナ の親格子における［row／column］として共有されることに注意。】

下位格子は、本質的には，次の能を供する：

自身を通して、親格子のパラメタ群を自身が入れ子にしている各要素へ渡して、各要素の内容に基づくサイズ法の情報を親格子へ戻す。

<line-name-list> 引数は、親格子と共有される罫たちを、局所的に命名できるようにする。与えられた場合、指定された各 <line-names> は、下位格子の明示的な格子を成す罫に、罫 1 から順にあてがわれる。超過した <line-names> は無視される。

この格子コンテナは［入れ子な格子でない場合／独立な整形文脈を確立するよう強制される場合（例： レイアウト封込めに因り [CSS-CONTAIN-2] ）］、使用値は初期値 none になり、下位格子にはならない。

下位格子化されない軸は、自立的 な軸と称される。

<DIV style="display:grid; grid-auto-flow:column; grid-template-columns:subgrid [a1] [a2] [a3]; border:1px solid red; "> <DIV style="border:1px solid black">１</DIV> <DIV style="grid-column:1/a1; border:1px solid black">２</DIV> <DIV style="grid-column:1/a3; border:1px solid black">３</DIV> </DIV> ¶

<line-names>

＝[ <custom-ident>* ]

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

<DIV style="border:1px solid red;
 display:grid;
 grid-template-columns:[L1] 40px [L2] 60px [L3] 80px [L4];
 grid-template-rows:[R1] 50px [R2] 70px [R3] 90px [R4];
">
 <DIV style="grid-column:L1; border:1px solid black">1</DIV>
 <DIV style="grid-column:L2/L4; border:1px solid black">2</DIV>
 <DIV style="grid-row:R2/R4; border:1px solid black">3</DIV>
 <DIV style="grid-row:R2; grid-column:L2; border:1px solid black">4</DIV>
</DIV>

<DIV style="border:1px solid red;
 display:grid;
 grid-template-columns:[L] 40px [L] 60px [L] 80px [L];
 grid-template-rows:[R] 50px [R] 70px [R] 90px [R];
">
 <DIV style="grid-column:L 1; border:1px solid black">1</DIV>
 <DIV style="grid-column:L 2/L 4; border:1px solid black">2</DIV>
 <DIV style="grid-row:R 2/R 4; border:1px solid black">3</DIV>
 <DIV style="grid-row:R 2; grid-column:L 2; border:1px solid black">4</DIV>
</DIV>

<track-size>

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

<track-breadth>

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

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template-columns:40px 30% auto;
 grid-template-rows:50px;
">
 <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:200px;
 display:grid;
 grid-template-columns:1fr 1.2fr 1.5fr;
 grid-template-rows:50px;
">
 <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>)

fit-content() ○

＝fit-content(<length-percentage>)

<inflexible-breadth>

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

<fixed-size>

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

<fixed-breadth>

＝<length-percentage>

minmax() ○

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

minmax() ○

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

<line-name-list>

＝[<line-names> | <name-repeat>]+

max-content

max( 筋を占めている各 格子アイテムの最大内容供与 ) を表現する。

min-content

max( 筋を占めている各 格子アイテムの最小内容供与 ) を表現する。

grid-template-columns:
  10px [col-start] 250px [col-end]
  10px [col-start] 250px [col-end]
  10px [col-start] 250px [col-end]
  10px [col-start] 250px [col-end]
  10px;

grid-template-columns:
  repeat(4, 10px [col-start] 250px [col-end])
    10px;

テスト