How Can I Make Nested CSS Grid Rows Auto-Size to Match Content Height?

CSS Grid: Auto-sizing Rows to Fit Content

When using nested CSS grids, it's possible to encounter an issue where the row heights of the right nested grid are influenced by the left grid, resulting in mismatched heights. To resolve this problem and have the right-side rows adjust to the content size, we can utilize the grid-auto-rows: max-content property.

In the provided code snippet, the right nested grid's grid-auto-rows: auto sets the row height to be automatically calculated based on the content within it. However, as the left grid has multiple rows, the right grid's height is also influenced, resulting in uneven row heights.

By modifying the grid-auto-rows property of the right nested grid to grid-auto-rows: max-content, we enforce that the row height is set to the height of the largest element within each row. This ensures that the right nested grid's rows match the left grid's row heights, regardless of the content's size.

Below is the updated code:

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

With this modification, the right nested grid's rows will automatically adjust to the content size, ensuring that both grids have rows of equal height.

The above is the detailed content of How Can I Make Nested CSS Grid Rows Auto-Size to Match Content Height?. For more information, please follow other related articles on the PHP Chinese website!