コンテンツのサイズに関係なく、CSS グリッドを使用して等しい幅の列を作成する方法

CSS グリッドを使用した等しい幅の列の作成

行要素内の子を、要素に関係なく同じ数の列に表示したいとします。子供の数。 Flexbox ではこれを簡単に実現できますが、CSS グリッドには別の課題があります。この記事では、CSS グリッドを使用してこれを実現するソリューションを提供します。

ソリューション

最初の一般的な試みは、グリッドの値としてrepeat(3, 1fr) を使用することです。 -template-columns プロパティ。ただし、1fr は使用可能なスペースに基づいてスペース配分を計算します。この制限は、コンテンツがトラック サイズを超える場合に問題となり、列のオーバーフローを防ぎ、それに応じて列の幅を調整します。コンテンツが切り捨てられた部分的な列は不等になる可能性があります。

列幅を正確に等しくするには、次のルールを使用する必要があります。

<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)) という 2 つのアプローチの違いを示しています。

以上がコンテンツのサイズに関係なく、CSS グリッドを使用して等しい幅の列を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。