グリッド項目の高さのパーセンテージが期待どおりに機能しないのはなぜですか?

親の高さのパーセンテージとしてグリッド要素の高さを計算すると失敗する理由

CSS グリッドの高さの計算は、特にパーセンテージを使用する場合に混乱を招く可能性があります。この例では、グリッド項目の高さは 200% に設定されていますが、コンテナーの高さの 2 倍にはなりません。

グリッド階層について

グリッドアイテムは、コンテナ内に含まれるトラック内に存在します。したがって、グリッド項目の親は直接コンテナではなく、トラックになります。

高さのパーセントとグリッド構造

グリッド行の高さが定義されていない場合長さの固定単位 (例: px)、または利用可能なスペースの割合として計算された値 (例: 1fr)、グリッド項目の高さのパーセンテージ失敗します。この場合、グリッド項目の高さはデフォルトで auto になり、必要に応じて行を拡張できるようになります。

コンテナと行の高さを設定する

グリッド要素の高さを確保するには高さはコンテナの高さに基づき、コンテナと行の両方に固定の高さを設定します。提供されたコードでは、コンテナーの高さは 100px ですが、行の高さは 1fr に設定されています。行の高さを 100 ピクセルに変更すると、グリッド項目の 200% の高さがコンテナの高さの 2 倍になります。

更新された例:

.gridContainer {
  // ...
  grid-template-rows: 100px;
}

.gridItem {
  // ...
  overflow: auto;
}

行の高さをコンテナの高さに一致させると、グリッド項目の高さが期待どおりに動作し、コンテナの高さが 2 倍になり、コンテンツが内部に正しくラップされるようになります。それ。

以上がグリッド項目の高さのパーセンテージが期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。