How can I make nested CSS Grid rows automatically adjust their height to match content?

CSS Grid: Auto Height Rows, Sizing to Content

When working with nested CSS grids, achieving consistent row heights across both grids can be a challenge. In this scenario, the rows in the right nested grid are forced to match the height of the rows in the left nested grid, resulting in uneven spacing.

To rectify this issue, you can employ the grid-auto-rows: max-content property for the right nested grid. This property sets the height of each row to the height of its tallest child element. As a result, the rows will dynamically adjust to accommodate the content, aligning the heights with those in the left nested grid.

Example:

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

This modification ensures that each row in the right nested grid is sized to fit its content, creating a consistent height between both grids. Here's an updated snippet:

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

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

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

Now, the rows in both the left and right nested grids will automatically adjust their height, creating visually consistent results.

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