CSS3

CSS関数

repeat()

[Edge]○。→●、mdn

一連の筋を繰り返すための記法。

<integer[1,∞]> ○

繰り返し回数を数値で指定する。

<DIV style="border:1px solid red; width:180px;
 display:grid;
 grid-template:50px 70px/repeat(3, 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>

auto-fill ●

繰り返し回数を指定するキーワード。

<DIV style="border:1px solid red; width:180px;
 display:grid;
 grid-template:50px 70px/repeat(auto-fill, 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>

auto-fit ●

繰り返し回数を指定するキーワード。

<DIV style="border:1px solid red; width:180px;
 display:grid;
 grid-template:50px 70px/repeat(auto-fit, 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>

<track-list>

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

筋リスト。<integer> 分の回数だけ繰り返される。

<DIV style="border:1px solid red; width:280px;
 display:grid;
 grid-template:50px 70px/repeat(auto-fill, 40px 60px);
">
 <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 style="border:1px solid black;">5</DIV>
</DIV>

いくつか制約がある：

• repeat() 記法は入れ子にできない。
• 自動的な繰り返し（auto-fill／auto-fit）と［内在的サイズ法関数、flex 可能なサイズ法関数］とを組み合せることはできない。

<line-names>

＝'[' <custom-ident>* ']'

<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 70px/repeat(3, 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-repeat>

＝repeat(
　<integer[1,∞]>,
　[<line-names>? <track-size>]+ <line-names>?
)

<track-breadth>

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

minmax() ○

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

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template:50px 70px/repeat(3, minmax(40px, 60px));
">
 <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:100px;
 display:grid;
 grid-template:50px 70px/repeat(3, minmax(40px, 60px));
">
 <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> )

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template:50px 70px/repeat(3, fit-content(40px));
">
 <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

<auto-repeat>

＝repeat(
　[auto-fill | auto-fit],
　[<line-names>? <fixed-size>]+ <line-names>?
)

<fixed-repeat>

＝repeat(
　<integer [1,∞]>,
　[<line-names>? <fixed-size>]+ <line-names>?
)

<name-repeat>

＝repeat(
　[<integer[1,∞]> | auto-fill],
　<line-names>+
)

<length-percentage> ○

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

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

<flex> ○

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

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

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

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template:50px 70px/repeat(3, 1fr 2fr);
">
 <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:100px;
 display:grid;
 grid-template:50px 70px/repeat(3, minmax(min-content,60px));
">
 <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:100px;
 display:grid;
 grid-template:50px 70px/repeat(3, minmax(max-content,60px));
">
 <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:50px 70px/repeat(3, minmax(max-content,60px));
">
 <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>

auto

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

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

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

<DIV style="border:1px solid red; width:200px;
 display:grid;
 grid-template:50px 70px/repeat(3, minmax(auto,60px));
">
 <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:50px 70px/repeat(3, minmax(40px, 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>

minmax() ○

＝minmax(min, max)

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

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

fit-content() ○

＝fit-content( <length-percentage> )

max( 最小, min( 上限, max-content ) ) を表現する。

ここで、最小は auto による最小を表現する（これは、min-content による最小に等しくなることが多いが、常にではない）

上限は fit-content() の引数に渡された筋サイズ法関数。これは、本質的には、min( minmax(auto, max-content), minmax(auto, 上限) ) として計算される。

テスト