グリッド項目の高さのパーセンテージが正しく機能しないのはなぜですか?

グリッド要素の高さが正しく計算されないのはなぜですか?

高さの計算が正しくないのは、CSS グリッドでの高さのパーセンテージの解釈方法が原因である可能性があります。レイアウト.

コードでは、グリッド コンテナーの高さは 100 ピクセルに固定されています。一方、グリッド項目の高さは 200% です。通常、グリッド項目はコンテナーの高さの 2 倍 (200px) を占めることが予想されます。ただし、これはあなたの場合には起こりません。

この理由は、CSS グリッド レイアウトでは、グリッド要素がトラック内に存在し、そのトラックがコンテナ内に存在するためです。グリッド アイテムは、コンテナ内ではなく、トラック内の行または列を占めます。

したがって、グリッド アイテムの高さのパーセンテージは、コンテナの高さではなく、それが占めるトラックの高さを基準とします。コードでは、行にはデフォルトの自動高さが設定されており、必要に応じてグリッド項目を伸縮できます。

この問題を解決するには、グリッド項目が占める行に特定の高さを設定する必要があります。これにより、グリッド項目の高さのパーセンテージがその高さを基準にして正しく計算されます。変更したコードでは、コンテナの高さと一致するように行の高さが 100px に設定されており、目的の動作が得られます。

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

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