ホームページ > ウェブフロントエンド > CSSチュートリアル > 「grid-template-columns」を 100% に設定すると、グリッド コンテナーがオーバーフローするのはなぜですか?

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

Linda Hamilton
リリース: 2024-11-02 14:57:02
オリジナル
328 人が閲覧しました

Why Does My Grid Container Overflow When Setting `grid-template-columns` to 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート