列幅の CSS グリッド レイアウトにおける「fr」とパーセンテージ単位の主な違いは何ですか?

CSS グリッド レイアウトにおけるパーセンテージと fr 単位の違い

CSS グリッド レイアウトを使用する場合、幅を定義する際のパーセンテージと fr 単位の違いを理解することが重要です列の数。

fr単位

fr 単位は「小数単位」を表し、コンテナー内の利用可能な空き領域でのみ機能します。 fr 単位を使用する場合、ブラウザはグリッドのギャップを考慮した後の残りのスペースに基づいて各列の幅を計算します。

たとえば、以下のコードでは、グリッド コンテナーは 12 列に分割され、各列はコンテナ内で等しい空き領域を占有:

grid-template-columns: repeat(12, 1fr);

パーセンテージ一方、単位

パーセント単位は、各列の幅をコンテナーの合計幅のパーセントとして定義します。これは、各列の幅がコンテナの実際の幅に基づいて計算されることを意味します。

たとえば、以下のコードでは、各列の幅は 8.33333% であり、これは 100% を 12 で割った値です。

grid-template-columns: repeat(12, calc(100% / 12));

パーセンテージによって列が変化する理由オーバーフロー

fr 単位とパーセント単位の主な違いは、グリッド ギャップの処理方法です。 fr ユニットを使用すると、列幅が計算される前にコンテナの空き領域からグリッド ギャップが減算されます。これにより、列がコンテナの幅をオーバーフローすることがなくなります。

ただし、パーセント単位を使用すると、グリッドのギャップが列の幅に追加されます。これは、列の合計幅が 100% であっても、グリッド ギャップを追加すると列がコンテナの幅をオーバーフローする可能性があることを意味します。

この問題を解決するには、fr 単位を使用することができます。または、グリッドのギャップを考慮してパーセンテージの計算を調整します。

以上が列幅の CSS グリッド レイアウトにおける「fr」とパーセンテージ単位の主な違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。