CSS グリッド: パーセンテージと `fr` 単位: どちらを使用する必要がありますか?

CSS グリッド レイアウトにおけるパーセンテージと Fr ユニットの比較

fr ユニットについて

機能: Fr ユニットは、内部に空き領域を割り当てますあるコンテナ。

計算: 空き領域 (グリッド ギャップを差し引いた後) は、fr 列間で均等に分割されます。

パーセンテージ (%) 単位について

関数: 列の幅をコンテナのパーセンテージとして定義します。 width.

計算: 列幅は、グリッド ギャップの幅を含む、合計幅を列数で割ることによって決定されます。

違い: オーバーフローとオーバーフロー分布

パーセンテージ: 固定のため、列がコンテナの幅の外側にオーバーフローする可能性があります。単位の長さとグリッドのギャップ。

Fr: 列はコンテナー内の空きスペースのみを占有し、コンテナーを超えて拡張することはありません。グリッド ギャップは空き領域の割り当てに影響しません。

グリッド ギャップでパーセンテージを使用する

パーセンテージ幅によるオーバーフローを回避するには、コンテナー全体の幅からグリッド ギャップの合計幅を減算してから、コンテナ幅で割ります。の数columns:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

ここで:

• 8.3333% はギャップを含まない各列の幅のパーセントです
• 9.1667px は 11 個のグリッド ギャップの合計幅 (各 10 ピクセル)

幅のパーセンテージに適切な値を使用するか、 fr ユニットを実装すると、列のサイズを管理し、CSS グリッド レイアウトでのオーバーフローを防ぐことができます。

以上がCSS グリッド: パーセンテージと `fr` 単位: どちらを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。