Achieving Equal Height Rows in CSS Grid Layout: Methods and Principles

Problem Background and Requirement Analysis

In modern web development, achieving equal height for all cells in multi-row grid layouts is a common requirement. Users expect all rows to have heights determined by the tallest cell in the entire grid, not just equal heights within each row. This layout need is particularly common in scenarios such as displaying cards, product lists, or image galleries.

CSS Grid Solution

Setting grid-auto-rows: 1fr easily achieves cross-row equal height effects. Behind this seemingly simple declaration lies the intelligent calculation mechanism of Grid Layout.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

The above code creates a grid container with adaptive column counts, where all rows are set to 1fr, ensuring they have the same height.

Working Principle of the fr Unit

The fr unit (flex fraction) is specifically designed in CSS Grid Layout for distributing available space. It is similar to the flex-grow property in Flexbox but involves more complex calculation logic in grid layouts.

When the grid container's height is indefinite, the fr unit is calculated as follows: first, compute the maximum content-based size (max-content) of each grid track, then divide that size by the respective flex factor to obtain a hypothetical 1fr size. Finally, the maximum of these hypothetical sizes is used as the actual 1fr length.

This means:

• Each row's height is determined by its content
• All rows adopt the value of the maximum content height
• Equal height for all rows is ultimately achieved

Practical Application Example

Consider a grid layout containing content of varying heights:

<div class="grid-container">
  <div class="grid-item">Short text</div>
  <div class="grid-item">This is a medium-length text content</div>
  <div class="grid-item">This is very long text content that requires more vertical space and may affect the row height calculation of the entire grid</div>
  <div class="grid-item">Another short item</div>
</div>

Even though each grid item has content of different heights, with the grid-auto-rows: 1fr setting, all rows automatically adjust to the same height as the tallest item.

Comparative Analysis with Flexbox

Flexbox has inherent limitations in multi-row layouts. According to the Flexbox specification, in a multi-line flex container, the cross-size of each line (which is the height in row-direction layouts) is the minimum size necessary to contain the flex items on that line.

This means:

• Flexbox can achieve equal height for items within a single row
• But it cannot achieve equal height effects across multiple rows
• Each row's height is calculated independently and does not affect others

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1;
  min-width: 200px;
}

In the above Flexbox layout, items in different rows may have varying heights, making unified cross-row equal height impossible.

Technical Details and Considerations

When using grid-auto-rows: 1fr, the following points should be noted:

• This effect is most pronounced when the container height is indefinite
• If the container has a fixed height, space distribution will be based on available space rather than content height
• Internal layout of grid items (such as padding, margin) will affect the final row height calculation
• Combining with grid-template-rows can create more complex hybrid layouts

Browser Compatibility and Best Practices

CSS Grid Layout is widely supported in modern browsers. For projects requiring support for older browsers, consider using feature detection:

@supports (display: grid) {
  .container {
    display: grid;
    grid-auto-rows: 1fr;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  /* Provide fallback solution */
}

Conclusion

CSS Grid Layout provides a concise and powerful way to achieve cross-row equal height effects through grid-auto-rows: 1fr. This method is not only code-efficient but also offers good semantics and maintainability. In contrast, Flexbox has inherent limitations in multi-row equal height due to its different design初衷. Understanding the core principles and applicable scenarios of these layout technologies helps developers choose the most appropriate solution to meet specific layout requirements.