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

CSS でのグリッド ギャップのパーセンテージ オーバーフロー

CSS グリッドで、グリッド ギャップ プロパティをパーセンテージ値に設定すると、予期しないオーバーフローが発生する可能性があります。この問題は、ブラウザによってグリッド ギャップのパーセントの処理方法が異なるために発生します。

ブラウザの動作

最初に、ブラウザはグリッド セル内のコンテンツを考慮してグリッドの高さを計算します。ただし、グリッド ギャップのパーセンテージは無視されます (自動として扱われます)。この計算により、グリッド セル間の間隔が狭くなります。

高さの計算

グリッドの高さを計算するために、ブラウザは各グリッド セルの高さを評価し、コンテンツの高さを追加します。マージンとパディングは問題ありませんが、グリッド ギャップは問題ありません:

console.log(document.querySelector('.grid').offsetHeight);

問題

オーバーフローを回避するには、次のアプローチを検討してください:

• 固定値を使用: パーセンテージのグリッド ギャップを固定値 (ピクセルやピクセルなど) に置き換えます。 ems) を使用して、一貫した間隔を確保します。
• グリッド テンプレートを定義行/列: これにより、行/列の高さを明示的に指定し、コンテンツの高さへの依存を取り除くことができます。
• 柔軟なトラック サイズを使用する: 柔軟なトラック サイズの使用を検討してください (例: fr) 利用可能なスペースをグリッド セル間でより均等に分配します。

追加注

不透明度はグリッド セルの高さの計算には影響しません。グリッド項目を動的に非表示または表示する必要がある場合は、display: none などの別のアプローチを使用してください。

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