パーセンテージで「grid-template-columns」を使用するとグリッドがオーバーフローするのはなぜですか?

100% の Grid-Template-Columns を持つグリッド オーバーフロー本文:

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

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

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

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

この設定だと、位置を固定すると親divがボディの右側にはみ出してしまいます。ただし、問題は幅 100% ではなく、グリッド テンプレートにあります。

解決策:

この問題は、グリッド テンプレートが使用可能なデータを分割するために発生します。スペースを 40% と 60% に分割し、グリッド ギャップ用に 5 ピクセルを残します。これは 100% を超えています。これを解決するには、代わりに fr ユニットを使用します。

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

この変更により、列は 5 ピクセルのギャップを考慮した後、残りのスペースを分割します。したがって、親 div は、position:fixed であっても本文内に収まります。

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