grid-template-columns: repeat(auto-fit, minmax(min(var(--minimum),100%), 1fr));
repeat
2つの引数を取る
- 繰り返す回数
- グリッドアイテムのサイズ
繰り返す回数にauto-fillまたはauto-fitを指定した場合、以下のような記述は無効になる↓
.grid {
display:grid;
grid-template-columns:repeat(auto-fit,1fr); /* 無効 */
}
直接1frと書くことはできない。
auto-fill とauto-fitの繰り返し回数
グリッドコンテナが特定の軸で確定的または最大サイズを持っている場合、繰り返し回数は、グリッドコンテナがオーバーフローしない最大の正の整数です。各トラックをその最大トラックサイズ関数(grid-template-rowsまたはgrid-template-columnsを定義するために使用される独立した値)として扱います。もし確定的な場合はそれを、そうでなければ最小トラックサイズ関数として扱い、grid-gapを考慮します。もし繰り返し回数がオーバーフローする場合は、繰り返しは1回となります。そうでなければ、グリッドコンテナが特定の軸で確定的な最小サイズを持っている場合、繰り返し回数はその最小要件を満たす最小の正の整数です。それ以外の場合、指定されたトラックリストは1回のみ繰り返されます。
グリッドコンテナが特定の軸で確定的または最大サイズを持っている場合、繰り返し回数は、グリッドコンテナがオーバーフローしない最大の正の整数です。
特定の軸とは、列(width)または行(height)のこと。
確定的なサイズを持っているとは、widthまたはheightをグリッドコンテナに指定されている場合。
最大サイズを持っているとは、max-widthまたはmax-heightをグリッドコンテナに指定されている場合。
グリッドコンテナをはみ出すことなく、できるだけ多くの列でグリッドを埋めようとします。
トラックとは
2本のグリッド線間の大きさのこと
参考
minmax(最小値,最大値)
最小サイズ〜最大サイズの範囲を定義する。
もし最大サイズが最小サイズより小さい場合、最大サイズに指定した値は無視される。
つまり、minmax(最小値、最小値)と同じ。
fr単位は最大値にのみ設定可能。
min()
引数に指定した値の中で最も小さい値を返す。
auto-fitかauto-fillかはデザイナーと協議