コンテンツのサイズに関係なく、CSS グリッドで同じ幅の列を実現するにはどうすればよいですか?

CSS グリッドで列幅を均等にする

CSS グリッドを使用する場合、要素を列全体に均等に分散するのが難しい場合があります。 Flexbox は簡単なアプローチを提供しますが、CSS グリッドで同じ結果を達成するには、もう少し考慮する必要があります。

元の質問:

「要素を行内の子の数に関係なく、行を同じ幅の列に配置します。CSS グリッドを使用してみましたが、うまく機能しません。

回答:

一般的に提案されているrepeat(3, 1fr)の解決策は完全に正確ではありません。応答に記載されているように:

「1fr は利用可能な (!) スペースの配分に関するものです。これは、コンテンツがトラック サイズより大きくなるとすぐに中断されます。」

列が保持されるようにするため幅が等しい場合は、代わりに minmax(0, 1fr) を使用することをお勧めします。

minmax(0, 1fr) では、グリッド トラックを 0 まで小さく、1fr まで大きくすることができます。これにより、列の幅が確実に等しく維持されます。ただし、このアプローチでは、列の幅を超えるとコンテンツのオーバーフローが発生する可能性があります。

これらのアプローチの違いを視覚的に示すために、次の例を検討してください。

Withrepeat(3) 、1fr)、列は利用可能なスペースに基づいて幅を調整するため、幅が異なる可能性があります。ただし、repeat(3, minmax(0, 1fr)) を使用すると、コンテンツのサイズに関係なく、3 つの列すべてが正確に同じ幅になります。

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