CSS グリッドで正確に等しい列幅を実現するにはどうすればよいですか?

CSS グリッドでの正確な等しい列幅

CSS グリッドで同じサイズの列を作成するのは簡単そうに見えますが、それには特別なアプローチが必要です。 Flexbox はフレックスベースのプロパティを使用して簡単なソリューションを提供しますが、CSS グリッドではより正確な構成が必要です。

課題:

次のような HTML 構造があるとします。

<code class="html"><div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div></code>

目標は、行内の子要素の数に関係なく、これらの要素を同じ列に表示することです。

解決策:

共通1fr は列の厳密な等価性を強制するのではなく、使用可能なスペースを分配するため、repeat(3, 1fr) のアプローチでは不十分です。コンテンツがトラック サイズを超える場合、自動的に調整されず、列幅が不均一になる可能性があります。

正確に同じ列幅を実現するには、次の CSS プロパティを使用します:

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

説明:

minmax(0, 1fr) では、グリッド トラックを 0 まで小さく、1fr まで大きくすることができます。これにより、列が等しくなることが保証されます。ただし、コンテンツが列より大きい場合、または折り返すことができない場合は、オーバーフローが発生する可能性があるため、注意してください。

違いを示すために、次の例を考えてみましょう。

<code class="css">.equalColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.minmaxEqualColumns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}</code>

equalColumns stop(3, 1fr) を使用:

minmaxEqualColumns with stop(3, minmax(0, 1fr)):

以上がCSS グリッドで正確に等しい列幅を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。