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

等しいサイズの CSS グリッド列

多くのプログラマーは、CSS グリッド レイアウトで同じ幅の列を実現するという課題に直面しています。 Flexbox を使用するとこのタスクが簡素化されますが、CSS グリッドを使用しても同様に実行できます。

最も一般的なアプローチは、grid-template-columns:repeat(3, 1fr); のように、repeat() 関数を使用することです。 。ただし、この省略表現は利用可能なスペースを配布するだけであるため、コンテンツがトラック サイズを超える場合には問題が発生する可能性があります。コンテンツのサイズに関係なく同じ幅を確保するには、次の構文を使用します。

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax() プロパティでは、トラックを最小 0 から最大 1fr までにすることができ、列のサイズが均等になります。ただし、コンテンツが大きすぎる場合、またはラップできない場合、オーバーフローが発生する可能性があることに注意してください。

違いを示す例を次に示します。

• repeat(3, 1fr): Ifコンテンツがトラック サイズを超えているため、列の幅が不均一になる可能性があります。
• repeat(3, minmax(0, 1fr)): 列の幅は常に同じですが、オーバーフローが発生する可能性があります。

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