Equal height rows in a flex container

css

responsive-design

grid-template-columns

grid-auto-rows

byNikita Barsukov·Dec 21, 2024

For equal height rows in a flex container, employ display: flex;, flex-wrap: wrap;, and align-items: stretch;. Items stretch to fill available vertical space, yielding consistent height, as follows:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* The secret sauce to equal heights */
}

.flex-item {
    flex: 1; /* Flexible growth, can drink all the coffee */
    margin: 5px;
}

<div class="flex-container">
  <div class="flex-item">Content 1</div>
  <div class="flex-item">Content 2</div>
  <div class="flex-item">Content 3</div>
</div>

This approach maintains equal height rows across flex items, catering to varied content for a responsive layout.

Flexbox's friends and foes

Flexbox is fantastic, but it isn't alone. Evaluate when using other CSS Grid or JavaScript may offer a better solution.

Grid: leveling up layout

Although flexbox is a powerful ally, CSS Grid shines when managing equal height rows:

Grid-auto-rows: Set minmax() to align all rows to the tallest row's height.
Gap property: Manage consistent row and column spacing without bothering their height.
Browser support: Always inspect; Grid is a new kid on the block.

Responsive design meets CSS Grid

To cultivate a responsive design with equal height rows, consider:

Grid-template-columns: Apply repeat(auto-fit, minmax(x, 1fr)) to create sufficient responsive columns sharing equal height.
Grid-and-Flex combo: Marrying the strengths of both can yield superb layouts.

JavaScript: the backup plan

If CSS solutions falter, JavaScript can dynamically adjust equal heights, adapting to real-time content modifications.

Troubleshooting common pitfalls

Fixed-height faux pas: Fixed heights are contrary to flexbox's flexibility and discourage content adaptability and responsiveness.
Flex containers nesting: Make use of display: grid within flex items to benefit from grid's alignment perks.
Browser compatibility checks: Make sure layouts look uniform across different browsers.

Examples in the wild

It might be helpful to demonstrate a mixed content layout with equal rows. Here's a blend of flexbox and grid:

<div class="flex-container">
  <div class="flex-item grid-child">...</div>
  <div class="flex-item grid-child">...</div>
  <!-- More items -->
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Let's wrap this up! */
}

.grid-child {
  display: grid;
  grid-template-rows: repeat(2, minmax(auto, 1fr)); /* Every child the same height, no favorites here! */
}

Know your resources

Rely on reputable resources for a deep-dive:

MDN documentation: Dissect grid-specific properties.
CSS-Tricks guides: Understand flexbox and grid through diagrams and comparisons.
DigitalOcean: Learn from practical and illustrated examples.