How to Make CSS Grid Rows Adjust to Content Height in Nested Grids?

CSS Grid - Adjusting Row Height to Content: Max-Content for Auto Height

When working with nested CSS grids, it's possible to encounter situations where the height of outer grid rows influences the inner grid rows, even when they should ideally adjust to the size of their content. In such cases, the key to achieving the desired behavior is by using the CSS property grid-auto-rows.

Nested CSS Grids and Row Height Propagation

In the provided code snippet, we have two grid containers (div and .grid-2) arranged horizontally within a parent grid container (grid-1). The columns in each grid are defined using grid-template-columns, and the auto-placement of rows is controlled by grid-auto-rows.

By default, the .grid-2 container sets grid-auto-rows to auto, which means rows adjust to fit their content. However, the issue arises with the inner grid container .grid-3. Even though grid-auto-rows is also set to auto, the nested grid's row heights are affected by the outer grid's rows. This leads to the taller side of the .grid-2 container propagating its height to the .grid-3 container, resulting in a consistent row height throughout both grids.

Setting Grid Rows to 'Max-Content'

To address this issue and adjust the .grid-3 container's rows to the size of their content, we need to modify the grid-auto-rows property. The max-content value, when used with grid-auto-rows, ensures that each row in the inner grid is sized according to its content, regardless of the height of rows in the outer grid.

By setting grid-auto-rows: max-content in the inner .grid-3 container, we instruct the browser to calculate the size of each row based solely on the content within that row. This allows the inner grid to adjust independently of the outer grid, resulting in rows that perfectly wrap their content, as desired.

Updated Code Snippet

In the updated code snippet below, you can see the modification to grid-auto-rows in the inner .grid-3 container:

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

With this adjustment, the rows in the .grid-3 container will dynamically adapt to the height of their content, achieving the desired resizing behavior.

The above is the detailed content of How to Make CSS Grid Rows Adjust to Content Height in Nested Grids?. For more information, please follow other related articles on the PHP Chinese website!