入れ子になった CSS グリッドで行の高さを自動調整するにはどうすればよいですか?

CSS グリッド レイアウト: コンテンツベースのサイズ変更による行の高さの自動化

このシナリオでは、2 つのネストされたグリッドを含むグリッド デザインがあります。左側のネストされたグリッドは期待どおりに動作しますが、右側のネストされたグリッドの行の高さは、左側のグリッドの行の高さと一致するように設定されます。

grid-auto-rows プロパティを max- に設定します。適切なネストされたグリッド内のコンテンツにより、その行がコンテンツの高さに合わせて調整できるようになり、問題が解決され、両方のネストされたグリッドの行が同じになるようになります。 height:

.grid-3 {
  grid-auto-rows: max-content;
}

この変更により、右側のネストされたグリッドの行は内容に合わせて自動的に拡大縮小され、2 つのグリッド間の望ましい視覚的なバランスが維持されます。

以上が入れ子になった CSS グリッドで行の高さを自動調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。