CSS グリッド レイアウト、自動的に行を追加し、列幅をグリッド項目の最大幅に設定

Question

任意の数のグリッド項目を含むグリッド レイアウトが必要で、グリッド項目が埋まると、次のような新しい行が自動的に作成されます。

リーリー リーリー

問題は、

75px をハードコーディングしたくないことです。 この値を「最も広いグリッド項目のコンテンツ幅」に設定する方法はありますか?

75px を min-content に変更してみました。これは仕様どおりに機能するようですが、開発ツールではこれは無効な CSS であると言われます。また、grid-template-columns の代わりに grid-auto-columns: min-content だけを設定しようとしました。これにより、幅は正しく設定されているようですが、行全体が占有されます。

Answer 1

簡単に言えば答えはノーです。しかし、これは素晴らしい質問であり、本当にサポートされるべき一般的な使用例だと思います。

グリッド テンプレート列に移動します。 自動繰り返し の関連部分は

です リーリー

固定サイズはです。 リーリー

その他のビットは

リーリー

これは、

minmax() を使用して grid-template-columns に列を自動的に生成する場合、最小値または最大値 は固定長である必要があることを意味しますまたはパーセンテージ。 minmax 式の最初の値として max-content を使用できますが、式の 2 番目の値として固定長またはパーセンテージを使用する場合に限ります。とても迷惑ですよね。この制限が存在する理由を理解できれば幸いです。

この問題を解決できますか?この例は希望に近いものですか?

リーリー リーリー