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

CSS グリッド: ネストされたグリッド行をコンテンツ サイズに調整する

提供された HTML と CSS で、ネストされたグリッド行が配置されているという問題が発生しました。 Grid .grid-3 は、その行をネストされたグリッド .grid-2 の高さに強制的に揃えます。これを解決するには、.grid-3 の行をそのコンテンツのサイズに合わせて調整し、それによって .grid-2 の行の高さと一致させます。

解決策は、grid-auto-rows にあります。財産。デフォルトでは、このプロパティは auto に設定されており、内容のサイズに関係なく行間でスペースが均等に分配されます。ただし、この場合、コンテンツに合わせて調整する行が必要です。

これを実現するには、.grid-3 グリッドで Grid-auto-rows: max-content を設定する必要があります。これにより、コンテンツの指示どおりに行の高さを調整し、.grid-2 行の高さと一致するようにブラウザーに指示します。

更新された CSS スニペットは次のとおりです:

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

この変更により、.grid-3 の行はコンテンツに合わせてサイズ変更され、コンテンツを完全に保持しながら .grid-2 行の高さに一致します。

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

これは、行がコンテンツのサイズに合わせて調整され、異なるグリッドが互いにシームレスに位置合わせできるようにする CSS グリッドの構成方法を示しています。

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