Flexbox は、等幅の列に項目を表示する機能で認知されています。ただし、CSS グリッドには柔軟なレイアウト オプションも用意されているため、同じ効果をどのように実現するかという疑問が生じます。
提供される HTML 構造には、複数の子 item 要素を持つ row 要素が含まれています。目標は、存在する項目の数に関係なく、これらの項目を行全体に均等に分散することです。
CSS グリッドに対して提案されている一般的な解決策は、repeat(3, 1fr) を使用することです。これにより部分的には望ましい効果が得られますが、コンテンツがトラック サイズを超えると失敗する可能性があります。これは、1fr が使用可能なスペースの分布を示しており、すべてのケースで列幅が等しいことが保証されるわけではないためです。
正確な均等性を保証するには、代わりに次の CSS コードを使用する必要があります:
<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>
minmax(0, 1fr) は、グリッド トラックを最小サイズ 0、最大サイズ 1fr に制限します。これにより、コンテンツがオーバーフローした場合でも、すべての列の幅が同じになることが保証されます。
ここでは、repeat(3, 1fr) とrepeat(3, minmax(0, 1fr)) の違いを示す例を示します。
<code class="html"><div class="container"> <div class="row" style="grid-template-columns: repeat(3, 1fr)"> <div class="item">1</div> <div class="item">2</div> <div class="item overflow">Very long text that overflows the column</div> </div> <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))"> <div class="item">1</div> <div class="item">2</div> <div class="item overflow">Very long text that overflows the column</div> </div> </div></code>
repeat(3, 1fr) を使用すると、オーバーフロー項目がその列から抜け出します。対照的に、repeat(3, minmax(0, 1fr)) は、すべての列が等しいままであることを保証し、オーバーフローの内容は以下に表示されます。
以上がCSS グリッドで同じ幅の列を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。