How to make two columns equal height in Webflow?

By default, HTML elements only stretch as tall as their content. Two side-by-side columns with different amounts of content will end up at different heights, creating an uneven layout. Equal-height columns fix this by forcing both to match the tallest one.

Using Flexbox for equal-height columns

Flexbox is the standard solution. Flex children automatically stretch to fill the cross-axis of their container, which means equal height comes for free.

1. Select the parent element (the row containing both columns)
2. Set display: flex in the Style panel
3. Set flex-direction: row
4. Both child columns will now match the height of the taller one

No extra settings are needed on the children. Flex items stretch by default along the cross axis (align-items: stretch).

If your columns need specific internal alignment, add display: flex and flex-direction: column to each column div. This lets you push content to the top or bottom independently while the outer containers stay equal height.

Using CSS Grid

Grid also handles equal heights natively:

1. Set the parent to display: grid
2. Define two columns: grid-template-columns: 1fr 1fr
3. Both grid children automatically match the tallest cell in the row

Grid is a good choice if you need more complex layouts beyond two columns or want precise control over gaps and alignment.

Common mistake: setting fixed heights

Avoid hardcoding heights on your columns. Fixed pixel heights break when content changes or on different screen sizes. Let the layout method (flexbox or grid) handle height automatically.

If you need a minimum height — for example, a hero section with two equal panels — set min-height on the parent, not the children. The flex or grid layout will still ensure both columns match.

Responsive considerations

On mobile breakpoints, two-column layouts typically stack vertically. When stacked, equal height is no longer relevant — each column takes only the height it needs. Check your mobile layouts in the Designer to confirm stacking behaves as expected, and remove any height-related overrides that might look wrong at smaller widths.