How can I make nested CSS Grid rows adjust to their content size instead of inheriting the height of a parent grid?

CSS Grid: Adjusting Nested Grid Rows to Content Size

In the provided HTML and CSS, you've encountered an issue where the nested grid .grid-3 forces its rows to align with the height of the nested grid .grid-2. To resolve this, you want the rows of .grid-3 to adjust to the size of their content, thereby matching the height of the .grid-2 rows.

The solution lies in the grid-auto-rows property. By default, this property is set to auto, which distributes space evenly among rows regardless of their content size. However, in this case, we need rows that adjust to the content.

To achieve this, you'll need to set grid-auto-rows: max-content on the .grid-3 grid. This tells the browser to make the rows as tall as their content dictates, ensuring they'll match the height of the .grid-2 rows.

Here's the updated CSS snippet:

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

With this change, the rows in .grid-3 will now resize to accommodate their content, matching the height of the .grid-2 rows while keeping their content fully visible.

<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>

This demonstrates how to configure CSS Grid to ensure rows adjust to the size of their content, allowing different grids to seamlessly align with each other.

The above is the detailed content of How can I make nested CSS Grid rows adjust to their content size instead of inheriting the height of a parent grid?. For more information, please follow other related articles on the PHP Chinese website!