固定配置されたグリッド レイアウトが本体の幅を超えるのはなぜですか?

本体の幅を超える固定位置のグリッド レイアウト

固定位置で CSS グリッドを使用すると、グリッド要素が拡張される問題が発生する可能性があります特に、grid-template-columns プロパティを 100% に設定する場合。この問題が発生する理由を理解するために、問題を分析して解決策を示しましょう。

提供された CSS コード:

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

親コンテナに 100% の固定幅を指定しました。 、つまり、表示領域の幅全体を占めることになります。 Grid-template-columns プロパティは、グリッド列の幅をそれぞれ 40% と 60% に設定します。

ただし、重要な問題は位置にあります。 Position: 親コンテナに固定を設定すると、通常のドキュメント フローから切り離され、指定された座標 (この場合はページの左上隅) に配置されます。ブラウザーは、コンテンツが表示領域を超えている場合でも、固定要素用のスペースを予約します。

この動作は、width: 100% プロパティとは関係ありません。この行を削除したとしても、問題は依然として存在します。原因は、grid-template-columns プロパティです。

grid-template-columns プロパティは、使用可能なスペースを 2 つの列に分割しますが、列間に 5 ピクセルのグリッド ギャップも指定しています。グリッドの全体の幅。あなたの場合、40% 60% 5px = 105px。この追加の 5 ピクセルにより、右列の端が表示可能領域の外側に押し出され、本文の外側に表示されます。

解決策:

この問題を解決するには、次の計算を行う必要があります。グリッドのギャップを考慮した、グリッド列の正しいパーセンテージ。絶対パーセンテージを使用する代わりに、利用可能なスペースの割合を表す fr 単位を使用できます。

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

この改訂されたコードでは、4fr と 6fr の値は利用可能なスペースの 4 と 6 の部分を表します。 、 それぞれ。ブラウザはこれらの比率に基づいて列の実際の幅を計算し、5 ピクセルのグリッド ギャップを含めて親コンテナ内に収まるようにします。

fr ユニットを使用すると、応答性の高いグリッド レイアウトを作成できます。これにより、さまざまな画面サイズに適応し、グリッド要素がページの本文内に確実に収まるようになります。

以上が固定配置されたグリッド レイアウトが本体の幅を超えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。