ネストされたグリッドのコンテンツの高さに合わせて CSS グリッド行を調整するにはどうすればよいですか?

CSS グリッド - 行の高さをコンテンツに合わせて調整: 自動高さの最大コンテンツ

ネストされた CSS グリッドを使用する場合、外側の行の高さが異なる状況が発生する可能性があります。グリッド行は、理想的にはコンテンツのサイズに合わせて調整する必要がある場合でも、内側のグリッド行に影響を与えます。このような場合、望ましい動作を実現する鍵は、CSS プロパティの Grid-auto-rows を使用することです。

ネストされた CSS グリッドと行の高さの伝播

提供されたコード スニペットでは、次のようになります。親グリッド コンテナー (grid-1) 内に水平に配置された 2 つのグリッド コンテナー (div および .grid-2)。各グリッドの列は、grid-template-columns を使用して定義され、行の自動配置は、grid-auto-rows によって制御されます。

デフォルトでは、.grid-2 コンテナは、grid-auto-行を自動に設定します。これは、内容に合わせて行が調整されることを意味します。ただし、内部グリッド コンテナー .grid-3 で問題が発生します。 Grid-auto-rows も auto に設定されていますが、ネストされたグリッドの行の高さは外側のグリッドの行の影響を受けます。これにより、.grid-2 コンテナの高い側の高さが .grid-3 コンテナに反映され、両方のグリッド全体で行の高さが一定になります。

グリッド行を 'Max-Content' に設定

この問題に対処し、.grid-3 コンテナの行をコンテンツのサイズに合わせて調整するには、grid-auto-rows を変更する必要があります。 財産。 max-content 値を Grid-auto-rows とともに使用すると、外側のグリッドの行の高さに関係なく、内側のグリッドの各行がそのコンテンツに応じてサイズ設定されるようになります。

グリッドを設定することで-auto-rows: max-content 内部の .grid-3 コンテナーでは、その行内のコンテンツのみに基づいて各行のサイズを計算するようにブラウザーに指示します。これにより、内側のグリッドを外側のグリッドとは独立して調整できるようになり、必要に応じてコンテンツを完全にラップする行が得られます。

更新されたコード スニペット

以下の更新されたコード スニペットで、次のことがわかります。内側の .grid-3 コンテナーの Grid-auto-rows への変更:

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

この調整により、 .grid-3 コンテナはコンテンツの高さに動的に適応し、目的のサイズ変更動作を実現します。

以上がネストされたグリッドのコンテンツの高さに合わせて CSS グリッド行を調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。