If you have ever built containers in Elementor and thought, “Why is this stacking like that?” or “Why do the containers not fit together in one row?”, you are not alone. Most of the time, it’s not a complicated bug. It’s two settings doing exactly what they are supposed to do.
Those settings are direction and wrap.
Once you understand what direction controls and what wrap controls, you can build clean containers consistently. You will also find it much easier to troubleshoot when layouts break, especially at tablet and mobile breakpoints.
In this post, I’ll explain both settings in plain English, then we’ll use a real example: creating a feature section with cards that sit neatly on desktop, wrap cleanly on tablet, and stack properly on mobile.
Quick glossary (so we’re speaking the same language)
Container
Elementor’s layout building widget. It holds other widgets and also other containers. It controls layout settings like direction and wrap.
Parent container
The container that holds other containers. In this post example, it’s the main container that holds all the feature cards.
Child container
A container inside another container. In this post, each feature card is a child container.
Widgets
The actual content elements inside containers, like headings, text, icons, and buttons.
Card
This is a term commonly used in web design. It’s a single “block” of content and created with an Elementor container, usually with a background, padding, and a simple structure like icon + heading + text. Cards are commonly used in features and services sections.
Item
An item could be a container or widget.
Direction
Controls whether items inside a container flow left-to-right (row) or top-to-bottom (column).
Wrap
Controls whether items stay on one line or move onto a new line when there isn’t enough space.
The simple difference between direction and wrap
Think of a container as a row of items that can either flow across the page or down the page. That flow is controlled by direction.
- If your direction is row, items try to sit next to each other from left to right.
- If your direction is column, items stack vertically, one under the other.
Now imagine you have more items than can fit across the page. Wrap decides what happens next.
- If wrap is off, Elementor tries to keep everything on a single line, which can lead to squished items or horizontal overflow.
- If wrap is on, items are allowed to drop down onto a new row, which is what you want for containers where you intend on having multiple rows of items.
A feature card layout that behaves well across devices usually comes from one pattern: a parent container set to row + wrap, with each card designed internally.
Direction controls how your items line up
Direction is the setting that decides whether items inside a container line up horizontally or vertically. You’ll find it in the container’s Layout settings.
When you are building a container with multiple items inside, your direction setting almost always needs to be set to row. That gives you the “grid feel”, where cards sit next to each other when there is enough space.
Direction column (vertical) is still very useful, but usually inside the child container itself. A card is typically a vertical stack: icon at the top, heading below it, supporting text under that.
So, a clean way to think about it is:
- The container that holds the items is the parent container, set with direction row.
- Each card is a mini layout that stacks content, so it is set with direction column.
Once you start thinking like that, complex layouts become more easier for you to understand.
So, what is Elementor wrap?
Wrap is what turns a single row into a multi row layout. Here’s the common frustration: you set direction to row, add six cards, and Elementor tries to cram all six into one line. That makes everything narrow, uneven, or it pushes the layout wider than the screen.
That’s exactly what happens when wrap is disabled.
Turning wrap on gives Elementor permission to create multiple rows, which is what you actually want. Instead of “six cards in one line”, you get a true grid style layout such as 3 by 2 on desktop, then 2 by 3 on tablet, then a single column on mobile.
For feature sections, wrap should almost always be enabled on the parent container. It’s one of those settings that quietly solves a lot of layout pain.
A practical example: building a feature card section that wraps correctly
Let’s build this like you would on a real client site. Start with a parent container, then add a child container that will act as your card grid. This child container is the one that holds all your cards.
Set that container to:
- Direction: row
- Wrap: wrap
- Gap: something consistent so the spacing stays tidy as the grid changes. Such as 24px
Now create your card container once, style it, and duplicate it. Each card should be a container with direction set to column, because the content inside the card is stacked. Add your icon, heading, and text, and give the card padding and a background if you want a “card” look.
At this point, you’ll notice something important. Even with wrap enabled, you can still end up with messy columns if the cards do not have consistent sizing rules. This is where many Elementor builders start guessing.
The easiest and most predictable approach is to set the card widths per breakpoint.
- Desktop: 3 columns usually means each card is about one third width. So add 30% to each card and set each card to grow (grow is in advanced settings)
- Tablet: 2 columns usually means each card is about half width. So ensure each one is 45% width (and grow will already be applied from desktop)
- Mobile: 1 column means each card is full width. So ensure 100% width on mobile for each card.
Once you do that, wrap becomes your friend. The layout stops feeling random because you have told Elementor what the container should look like at each screen size.
The tablet breakpoint is where most layouts go wrong
If you only remember one tip from this post, make it this: tablet is not “smaller desktop”. It’s usually its own layout.
A desktop feature grid that looks great at three columns often looks cramped on tablet. That’s why so many grids feel broken there. Nothing is broken. Your layout simply needs a deliberate decision.
Most of the time, that decision is: go from 3 columns to 2.
When you switch the card widths to two columns on tablet and keep wrap enabled, the layout becomes instantly cleaner. Text has room to breathe, cards feel balanced, and you avoid that awkward “half wrapped, half squashed” look.
On mobile, you usually want a single column. You can achieve that by keeping row + wrap and setting cards to 100% width, or by switching the parent direction to column. Both work, but the simplest mental model is: keep the parent as a row, keep wrap on, and just set cards to full width on mobile.
Common problems and how to fix them quickly
If your cards are stacking in a single column on desktop, the first thing to check is whether your parent container is actually set to row or not. The second thing to check is whether your cards are accidentally set to full width at that breakpoint. Elementor will do what you told it to do.
If your cards refuse to wrap and instead overflow the page, wrap is usually disabled, or one of the children has a width that forces overflow. This can also happen when inner widgets have fixed widths or oversized padding that pushes the card beyond the container.
If wrap is on but your grid still looks uneven, that is usually because the cards are not following the same sizing rule. One card is “auto”, another is “grow”, another has a custom width. Consistency matters more than clever settings here. Make sure every card behaves the same.
If you are getting horizontal scroll on mobile, assume something is wider than the viewport. It might be a container with too much padding, a child widget with fixed width, an image not set to scale properly, or a no-wrap row forcing everything onto a single line. Find the one element that is causing overflow and the entire issue typically disappears.
How Element UI fits into this workflow
Once you understand direction and wrap, feature sections become much faster because you stop experimenting and start building with intention.
If you want to go even faster, you don’t need to rebuild your feature card structure every time. This is exactly where Element UI helps in a practical way. Instead of setting up the container from scratch, you can go straight to the features category, preview a layout that matches what you need, then copy and paste it into your page.
For example, if you want a container with icon-and-text cards that is clean, scannable, and easy to adapt, copy Features 15 and drop it into your page, then swap the icons and rewrite the text to match the brand:/components/features-15
If you prefer an image-and-text style card layout, grab Features 10 instead and customize that variation.
The point is not that these layouts are “finished designs”. The point is that the structure is already done, and the flex behaviour is already handled. You get to spend your time where it matters: content and brand styling.
