Closed5

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本のグリッド線間の大きさのこと

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

ユイト🍓ユイト🍓

min()

引数に指定した値の中で最も小さい値を返す。

このスクラップは2023/09/05にクローズされました