Equal Height Columns

view_column
Automatic equal heights regardless of content
align_vertical_center
align-items: stretch (default) makes items fill container height
aspect_ratio
flex: 1 on each column distributes available width equally
devices
Responsive columns that adapt to screen size
compare
No JavaScript or complex CSS hacks needed
code Equal Height Columns Code
.container {
  display: flex;
}

.column {
  flex: 1; /* Equal width */
  padding: 20px;
}

/* For responsive columns */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
view_column Equal Height Columns Example
Column 1
Short content in this column. All columns will have the same height regardless of content length.
Column 2
This column has more content than the others. Despite having different amounts of content, all columns automatically have the same height thanks to Flexbox's stretch behavior.
Column 3
Medium length content.
format_align_center Content Alignment Options
Top
Content aligned to top with align-items: flex-start
Center
Content aligned to center with align-items: center
Bottom
Content aligned to bottom with align-items: flex-end