CSS グリッド レイアウト: パーセンテージと「fr」単位 – 違いは何ですか?

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

CSS を使用してグリッド レイアウトを構成する場合、列と行のサイズを指定するための単位の選択は、レイアウトの動作。一般的に使用される 2 つの単位は、パーセンテージと分数単位 (fr) です。 CSS グリッド レイアウトのコンテキストで、これらのユニットの主な違いを調べてみましょう。

fr ユニット

fr ユニットは、グリッド ギャップを考慮した後のグリッド コンテナ内で利用可能な空き領域の小数単位を表します。 。基本的に、列または行が残りのスペースの比例した量を占有することができます。空き領域は、fr 値を持つ列または行に均等に分配されます。

これにより、グリッド コンテナーのサイズ変更に応じて要素のサイズも確実に変更されます。 Grid-column-gap と Grid-row-gap で定義されるグリッド ギャップは、fr 値を計算する前に、使用可能なスペースから減算されます。一方、

パーセント単位

パーセント単位では、列または行の幅を、グリッド ギャップを含むグリッド コンテナ全体のパーセンテージとして指定します。これは、要素のサイズが固定されており、コンテナのサイズに基づいて動的に調整されないことを意味します。

その結果、グリッドのギャップを含む列の合計幅が変更される状況が発生する可能性があります。グリッドコンテナの幅を超えています。これにより、レイアウトがコンテナからオーバーフローする可能性があります。

例

動作の違いを説明するために、次のグリッド レイアウトを考えてみましょう。

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

この場合、パーセンテージ単位は列の幅を定義するために使用されます。その結果、グリッド ギャップ (10 ピクセルのギャップで 11 個のギャップ) を含む列の合計幅がグリッド コンテナーの幅を超え、レイアウトがオーバーフローします。

ただし、使用に切り替えると、代わりに fr 単位:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

列は利用可能な空き領域に比例した量を占めるようになり、fr 値を計算する前に合計領域からグリッドのギャップが減算されます。これにより、グリッド コンテナーのサイズに基づいて動的に調整される応答性の高いレイアウトが得られます。

結論

グリッド レイアウトに適切なユニットの選択は、目的の動作によって異なります。パーセンテージ単位は固定サイズが必要な場合に適しており、fr 単位は利用可能なスペースに応じて拡大縮小する応答性の高いレイアウトが必要な場合に有益です。これらの単位の違いと、それらがレイアウトに与える影響を理解することは、効率的で見た目に美しい CSS グリッド レイアウトを作成するために重要です。

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