Grid-template-columns に 100% のグリッドを表示すると本文を超えるのはなぜですか?

Grid-template-columns で 100% のグリッドを表示すると本文を超えるのはなぜですか?

提供された CSS コード内:

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

この問題は、width: 100% プロパティからではなく、grid-template-columns 設定から発生します。パーセンテージ (40% および 60%) とグリッド ギャップ (5px) を指定すると、幅の合計が 100% を超えます。これにより、固定配置時に親コンテナがボディの右端を超えて拡張されます。

解決策: fr 単位の使用

この問題を解決するには、代わりに分数単位 (fr) を使用することをお勧めします。グリッド テンプレート列宣言のパーセンテージ。分数単位は、定義されたギャップを考慮して、スペースを比例的に割り当てます:

<code class="css">.parent {
  ...
  grid-template-columns: 4fr 6fr;
  ...
}</code>

例:

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

この変更により、親コンテナは、次の場合でもボディの境界内に完全に表示されるようになります。位置は固定されました。

以上がGrid-template-columns に 100% のグリッドを表示すると本文を超えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。