repeat(auto-fit, minmax(<rem>, 1fr))
以下のような指定がどういう意味か？
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); auto-fit の代わりに auto-fill を使うこともあるが、
fit の方が気がするボトムアップに見るよりも、トップダウンに見たほうがわかりやすい
要は、自動で折り返し、良い感じに幅が伸縮するリストを作ることができる
構成要素
どういう順序で理解すれば良さそうか
ボトムアップに構成要素を1つずつ抑えていくのも大事ではある
しかし、「これらはセットで使うもの」という前提があるので、それを先に知っておくとスムーズ
fr (単位)は、gridと一緒に使われる単位
余った余白をどう振り分けるか、という指定になる
minmax()は、2つの引数を取って、その間の値になるように計算される
minmax(10rem, 1fr) と書くことで、最小値は、
10rem 最大値は、余白分を全部埋めるように拡大
という意味になる
repeat() というpropertyに規定されている値の一つがauto-fit auto-fit と似ているものに、 auto-fill があるなので、この差異とかは最後に確認すれば良い
repeat() や auto-fit と、 minmax(値, fr) を使うことで良い感じになる minmax() は使わなくても意味論としては正しいが、無意味なのでやることないボトムアップに見ていくには良さそうな解説
repeat(auto-fill, minmax(min(100%, 250px), 1fr)); と書くこともあるminmaxの中でmin()を使っている
画面幅が小さい時にscrollbarが表示するのを避けられる
Tailwindにはまだそれを簡潔に書けるclassが用意されていないので議論中
e.g.
grid-rows-fill-16 tsx<ul className="grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-4">
</ul>