The easy way to create equal width columns in Elementor using Flexbox

David Denedo

David Denedo

Updated on .

Table of Content

Introduction

Struggling to make your Elementor feature cards align neatly in a row? You’re not alone! This guide reveals a magic trick using CSS Flexbox to achieve flawless column widths, eliminating guesswork and the need for empty containers. It’s responsive and adaptable, meaning your layouts will look the way you want on any screen size.

Options for Equal Columns

Single row

For side-by-side child items within a single row, use flex-wrap: nowrap. Ensure each element is wide enough, for example, a width of one-third or more of the total available space if there are three items. Easy peasy!

100 % / number of items

The easy way is to simply set the width of all child items to 100%, and on the parent container, setting flex-direction: row and flex-wrap: nowrap.

However, please note that this method restricts items to a single row; they won’t wrap onto the next row.

Multiple rows

Want equal-width columns that wrap to multiple rows? Some basic maths is involved but it’s worth it for precise control over your layout.

The maths made easy

Imagine the parent container’s width shared equally among its children, including any gaps between them. This formula does the magic:

child width = parent width − gap ⋅ ( number of children − 1 ) number of children

The width of the parent can be replaced with 100%, leading to the formula:

child width = { 100 % − gap ⋅ ( number of children − 1 ) } number of children

Implementation

Site-wide Custom CSS

Add this CSS snippet to your general CSS area like your Elementor site settings, child theme or your favourite code snippets plugin:

/* ||-- Site-wide CSS --|| */
.dd-flex--equal{
--_dd-grid-gap: var(--dd-grid-gap, 20px);
    --_dd-cols: var(--dd-cols, 2);
}
.dd-flex--equal.e-con-full > div,
.dd-flex--equal.e-con-boxed > .e-con-inner > div {
    flex-basis: calc((100% - var(--_dd-grid-gap) * (var(--_dd-cols) - 1)) / var(--_dd-cols));
}

Parent Container Properties

  1. Set the Content Width property to “Boxed” or “Fullwidth”, as needed.
  2. For the Gap, use the custom unit, to add this custom variable var(--_dd-grid-gap, 20px)
  3. Under “Advanced”, add the CSS Class dd-flex--equal

Section-specific Responsive Tweaks

Finally, use modifier classes or the selector keyword on each parent container to responsively control the number of columns per screen size.

Add this Custom CSS to each parent container and change the values as needed.

/* For Desktop */
selector{
    --dd-cols: 3;
    --dd-grid-gap: 20px;
}
/* For Tablet */
@media screen and (max-width: 1023px){
 selector{
    --dd-cols: 2;
}   
}

/* For Mobile */
@media screen and (max-width: 767px){
 selector{
    --dd-cols: 1;
}
}

Bonus Tip

For the last row with uneven items, use flex-grow: 1 to fill the whole row. Here is the updated site-wide CSS:

.dd-flex--equal{
    --_dd-cols: var(--dd-cols, 2);
    --_dd-gap: var(--dd-gap, 20px);
}

.dd-flex--equal.e-con-full > div, .dd-flex--equal.e-con-boxed > .e-con-inner > div{
    flex: 1 1 calc((100% - var(--_dd-grid-gap) * (var(--_dd-cols) - 1)) / var(--_dd-cols));
}

Why flexbox for equal-width columns?

While CSS Grid offers amazing layout power, Flexbox shines when handling unequal items. Its properties like justified-content lets you effortlessly align your last row (left, right, or centre). Plus, flex-grow dynamically expands items if needed.

Share your expertise

Have you found a better way? Have any unique insights? Please share them in the comments! Let’s learn and grow together as web layout masters. I’m trying to be more social, so you can reach me on Facebook or Twitter. Happy coding!

Leave the first comment