「grid-template-columns」を 100% に設定すると、グリッド コンテナーがオーバーフローするのはなぜですか?

グリッド テンプレート列で 100% のグリッド表示がボディ幅をオーバーフローする理由

CSS グリッドを利用する場合は、その影響を理解することが重要ですGrid-template-columns プロパティを 100% に設定する方法と、親コンテナの位置との関係。問題とその解決策を詳しく見てみましょう。

次のコード スニペットを考えてみましょう:

<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>

この設定では、親コンテナが右側のビューポートを超えて拡張されるという問題が発生する可能性があります。位置固定時は側面。これは、幅が 100% に設定されているためではなく、指定された Grid-template-columns 値と Grid-gap の組み合わせが原因です。

この問題は、grid-template-columns プロパティが分割しているために発生します。利用可能なスペースを 2 つの列に分割し、それぞれ親コンテナの幅の 40% と 60% に設定します。さらに、5 ピクセルのグリッドギャップにより、列間に余分なスペースが生じます。その結果、2 つの列に割り当てられた合計スペースとギャップが 100% を超え、親コンテナが右側でオーバーフローします。

この問題を解決するには、グリッドに固定パーセンテージを指定しないようにする必要があります。列を使用せず、代わりに fr ユニットを使用します。 fr 単位は分数ベースのサイズ設定単位であり、指定された幅とギャップを考慮した後で残りのスペースを分配できます。

調整されたコードの例は次のとおりです。

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

Inこの改訂されたコードでは、grid-template-columns プロパティが 4fr 6fr に設定され、最初の列の幅が 4 単位、2 番目の列の幅が 6 単位で、残りのスペースがそれらの間で比例的に分割される必要があることを示しています。これにより、位置に関係なく、親コンテナが境界をオーバーフローすることがなくなります。

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