CSS グリッドを使用して、行要素に 2 つ、3 つ、またはそれ以上の子要素があるかどうかを n 個の等しい列で表示する以下の HTML を作成したいと思います。Flexbox を使用すると簡単に実行できますが、CSS グリッドを使用して実行することはできません。ご協力いただければ幸いです。
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
ベストアンサー1
という一般的な答えはrepeat(3, 1fr)必ずしも正確ではありません。
1frこれは、 が利用可能な(!)スペースの分配に関するものだからです。これは、コンテンツがトラック サイズよりも大きくなるとすぐに壊れます。デフォルトでは、オーバーフローせず、それに応じて列幅を調整します。そのため、すべてが同じ1fr幅になることは保証されません。 は1fr、実際には の単なる省略形ですminmax(auto, 1fr)。
列の幅を本当に同じにする必要がある場合は、次のようにします。
grid-template-columns: repeat(3, minmax(0, 1fr));
minmax(0, 1fr)を使用すると、グリッド トラックを まで小さく まで大きくすることができ0、1fr同じ大きさの列を作成できます。ただし、コンテンツが列より大きい場合や折り返すことができない場合は、オーバーフローが発生することに注意してください。
違いを示す例を以下に示します。