CSS グリッドで同じ幅の列を実現するにはどうすればよいですか?

CSS グリッドの等幅列

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 サイトの他の関連記事を参照してください。