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

CSS グリッド: コンテンツに合わせて行のサイズを自動調整する

ネストされた CSS グリッドを使用すると、行の高さが変わる問題が発生する可能性があります右側のネストされたグリッドは左側のグリッドの影響を受けるため、高さが不一致になります。この問題を解決し、右側の行をコンテンツ サイズに合わせて調整するには、grid-auto-rows: max-content プロパティを利用できます。

提供されたコード スニペットでは、右側のネストされたグリッドの Grid- auto-rows: auto は、行内のコンテンツに基づいて自動的に計算される行の高さを設定します。ただし、左側のグリッドには複数の行があるため、右側のグリッドの高さも影響を受け、行の高さが不均一になります。

右側のネストされたグリッドの Grid-auto-rows プロパティを Grid-auto-rows に変更することで、 : max-content では、行の高さが各行内の最大の要素の高さに設定されるように強制されます。これにより、コンテンツのサイズに関係なく、右側のネストされたグリッドの行が左側のグリッドの行の高さと一致するようになります。

以下は更新されたコードです:

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

この変更により、右側のネストされたグリッドの行はコンテンツのサイズに合わせて自動的に調整され、両方のグリッドの行の高さが同じになるようにします。

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