CSS3

：

プロパティ

：

grid-auto-columns、grid-auto-rows

　 編集：2022.07.14 by T.A.

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

格子コンテナ内のアイテムの基本サイズ。

名前 grid-auto-columns、
grid-auto-rows
値 <track-size>+
初期値 auto
適用対象 格子コンテナ
継承 されない
百分率 § 筋のサイズ法を見よ
算出値 § 筋のサイズ法を見よ
正準的順序 文法に従う
アニメーション型 算出値の型による

［grid-auto-columns／grid-auto-rows］プロパティは、［grid-template-rows／grid-template-columns］によりサイズがあてがわれなかった筋のサイズを指定する。
そのような筋のうち、明示的にサイズされたものより［後に在るもの／前に在るもの］は、指定された各サイズ（<track-size>）を［最初の筋から順に、そのままの順に／最後の筋から順に、最後から逆順に］受け取る。サイズの個数が足りない場合は、必要なだけパターンが繰り返される。【例えば 1 個だけ指定された場合、どの暗黙的な筋も同じサイズを受け取ることになる。】

注記： 格子アイテムが［grid-template-rows／grid-template-columns／grid-template-areas］にて明示的に宣言されていない筋の中に位置される場合、それを保持するための暗黙的な筋が作成される。これが起こり得るのは、［アイテムが、明示的に範囲外の筋の中に位置された］とき、あるいは［自動配置アルゴリズムにより、追加の筋が作成された］ときである。

<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; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px;
 grid-auto-rows:20%;
">
 <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; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px 60px 80px;
 grid-auto-rows:20% 30%;
">
 <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; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px 60px min-content;
 grid-auto-rows:20% 30%;
">
 <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; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px 60px max-content;
 grid-auto-rows:20% 30%;
">
 <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>

<length-percentage> ○
[CSS-VALUES-3] にて定義される、負でない［長さ／百分率］値。

百分率値は、［column 筋／row 筋］においては格子コンテナ（コンテナ）の内縁［行内サイズ／ブロック サイズ］に相対的になる。コンテナのサイズが その各筋のサイズに依存する場合の百分率値は、まず、コンテナの内在的サイズを計算する目的においては、auto として扱った上で、コンテナ内にアイテムをレイアウトする目的においては、その結果のサイズに相対的に解決するものとする。

<DIV style="border:1px solid red; width:200px; height:100px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px 60px 130px;
 grid-auto-rows:50px 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:200px; height:100px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:30% 40% 50%;
 grid-auto-rows:50% 70%;
">
 <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>

<flex> ○
fr 単位による負でない次元であり、筋の flex 係数 を指定する。¶空白で区切ってリストとする。

<flex> サイズにされた各筋は、残りの空間から、その flex 係数に比例する割合を持ち分として得る。例えば、筋リストが 1fr 2fr の場合、各筋は、順に残余空間の 1/2、2/3 を占めることになる。詳細は flex 可能な長さ： fr 単位 を見よ。

注記： flex 係数の総和が 1 未満の場合、筋たちは残余空間の対応する割合分のみを占める ― 全体を埋めるよう拡げられることはない。

minmax() 記法の外側に現れるときは、自動的な最小（すなわち、minmax(auto, <flex>)）を意味する。

<DIV style="border:1px solid red; width:200px; height:100px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:1fr 1.5fr 2fr;
 grid-auto-rows:1fr 0.8fr;
">
 <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>

min-content
max( 筋を占めている各 格子アイテムの最小内容供与 ) を表現する。
<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px min-content 80px;
 grid-auto-rows:50px 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>

max-content
max( 筋を占めている各 格子アイテムの最大内容供与 ) を表現する。
<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px max-content 80px;
 grid-auto-rows:50px 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:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px max-content 80px;
 grid-auto-rows:50px 70px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">22222222</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:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px max-content 80px;
 grid-auto-rows:50px 70px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">あああああああ</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>

auto
最大としては、max（筋を占めている各 格子アイテムの最大内容供与）を表現する。しかしながら、max-content と違って、［align-content／justify-content］プロパティにより筋を拡げることも許容する。

最小としては、max（筋を占めている各 格子アイテムの最小サイズ）を表現する。（これは、初期時には min-content による最小に等しくなることが多いが、常にではない ― § 格子アイテムの自動的な最小サイズを見よ。）

minmax() 記法の外側に現れるときは、minmax(auto, auto) に等価になり、上で述べた最小から最大までの範囲を表現する（ほとんどの基本的な事例では、minmax(min-content, max-content) と同様にふるまうが、追加の能もある）。

<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px auto 80px;
 grid-auto-rows:50px 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>

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

［min ～ max］のサイズ範囲を定義する。min ＞ max の場合、max は min 以上に切り上げられる（本質的に、minmax(min, min) を得る）。max に対する <flex> 値は、筋の flex 係数を設定し、min に対するそれは、無効になるとする。

注記： この仕様の将来レベルでは、min に対する <flex> 値も許容され、それを正しく織り込むために筋サイズ法アルゴリズムを更新することになる。

<DIV style="border:1px solid red; width:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px minmax(30px,60px) 80px;
 grid-auto-rows:50px 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:140px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px minmax(30px,60px) 80px;
 grid-auto-rows:50px 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:140px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px minmax(min-content,60px) 80px;
 grid-auto-rows:50px 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:200px; height:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px fit-content(60px) 80px;
 grid-auto-rows:50px 70px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">222222</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:150px;
 display:grid;
 grid-template-areas:'a b c' 'd e f';
 grid-auto-columns:40px fit-content(60px) 80px;
 grid-auto-rows:50px 70px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">あああああ</DIV>
 <DIV style="border:1px solid black;">3</DIV>
 <DIV style="border:1px solid black;">4</DIV>
</DIV>
ただの60pxでも可能だが

次の宣言に対しては： 
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

5 本の罫が作成される：

  1. 格子コンテナの始端辺に 1 本
  2. 格子コンテナの始端辺から 100px の所に 1 本
  3. 前の罫からの距離が［ free 空間（ ＝ 格子コンテナの横幅 － flex 可能でない筋たちの横幅の総和 ）の半分 ］に等しい所に 1 本
  4. 前の罫からの距離が［ max( 前の罫と この罫の合間にある column に属する各 格子アイテムの最大サイズ ) ］に等しい所に 1 本
  5. 前の罫からの距離が［ max( 前の罫と この罫の合間にある column に属する各 格子アイテムの最小サイズ ) 以上、かつ［free 空間のもう半分］以下］の所に 1 本

flex 可能でないサイズ（100px、max-content、min-content）の総和が格子コンテナの横幅より大きい場合、最後尾の罫は，格子コンテナの始端辺からこの総和だけ離れた所に位置する（サイズ 1fr はいずれも 0 に解決される）。この総和が格子コンテナの横幅より小さい場合、最後尾の罫は、正確に格子コンテナの終端辺の所に位置する。これは一般に、一連の筋サイズのうち 少なくとも 1 個は <flex> 値があるときに成立する。

その他の，筋として妥当な定義例： 

/*  妥当な筋定義をいくつか */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px);

注記： 格子のサイズは、各筋サイズの総和そのままではない ― row-gap、 column-gap、および justify-content、align-content により、筋間に空間が追加され得るので。

例
<DIV style="display:grid; grid-auto-columns:50px; grid-auto-rows:70px; border:1px solid red">
<DIV style="grid-area:1/3; border:1px solid black">１</DIV>
<DIV style="grid-area:1/2; border:1px solid black">２</DIV>
<DIV style="grid-area:2/2; border:1px solid black">３</DIV>
<DIV style="grid-area:2/3; border:1px solid black">４</DIV>
<DIV style="grid-area:2/1; border:1px solid black">５</DIV>
</DIV>
１
２
３
４
５
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：