CSS Grid Layout の minmax() は auto-fill かどうかで文法が異なる

タイトルの通りなのですが、たびたび忘れてしまうのでメモ代わりに。
なお、日本語版のMDNの記述は微妙に間違っている。英語版は正しい記述だが、下記のことは説明されていない、と思います。

grid-template, grid-auto-columns, grid-auto-rows などで使う場合

repeat(i, ...)で使う場合もこちら。

grid-template: minmax( 
                 [ 100px | 100% | min-content | max-content | auto ],
                 [ 100px | 100% | 1fr | min-content | max-content | auto ]
);

fr単位を使えるのは、max側だけ。

---

repeat(auto-fill, ...) の中で使う場合

auto-fitも同様。

grid-template: repeat(auto-fill, minmax( 
                 [ 100px | 100% ],
                 [ 100px | 100% | 1fr | min-content | max-content | auto ]
));

または、

grid-template: repeat(auto-fill, minmax( 
                 [ 100px | 100% | min-content | max-content | auto ],
                 [ 100px | 100% ]
));

のどちらか。

つまるところ、

• fr単位を使いたいなら、min側はコンテンツ依存にできない。
• 片方をコンテンツ依存にしたいなら、もう一方は長さを固定しなくてはいけない。

ということかと思います。

---

仕様へのリンク

7.2.3.1. Syntax of repeat() | CSS Grid Layout Module Level 2