パーセンテージギャップを使用すると CSS グリッドがオーバーフローするのはなぜですか?

CSS グリッド ギャップのパーセンテージ オーバーフローの問題について

CSS グリッドを使用する場合、グリッド ギャップ プロパティをパーセンテージとして指定すると、予期しないエラーが発生する場合があります結果、特にオーバーフローするコンテンツ。この記事では、このオーバーフローの背後にある理由を詳しく掘り下げ、それを解決するための解決策を提供します。

問題: パーセンテージ ギャップとコンテンツ サイズ

最初は、グリッド ギャップのパーセンテージ値は、グリッド コンテナーの高さを基準にして計算されます。ただし、このアプローチでは、さまざまなブラウザーの動作に不一致が生じる可能性があります。ブラウザはまずコンテンツに基づいてグリッドの高さを計算し、パーセンテージギャップを事実上無視します。これにより、コンテンツがグリッド スペース全体を埋めることになり、グリッドの外側にオーバーフローが発生します。

例:

次のコードを考えてみましょう:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
}

.grid-1 {
  background-color: red;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

解決策: グリッドを調整する高さ

この問題を解決するには、グリッドの高さを明示的に調整できます。 1 つのアプローチは、高さプロパティを使用して、コンテンツの合計の高さより大きくすることです。

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 50%);
}

あるいは、calc() 関数を使用して、パーセンテージに基づいてグリッドの高さを定義することもできます。ギャップ:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 25% * 2);  // 50% divided by 2 for each gap
}

グリッドの高さを明示的に定義することで、コンテンツとパーセンテージベースのギャップの両方に対応し、オーバーフローを防止します。コンテンツ。

以上がパーセンテージギャップを使用すると CSS グリッドがオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。