Containers!
You put a container in a container in a container!

Containers and widgets are the same too – a container is a widget

Thats the basic approach, no more rows and columns, you instead use containers and then select how they should align within what they’ve been placed.

Widgets are containers too. A button, a text box, anything, is also a container itself…that you are placing within a container. This means they also have the same settings that you can adjust the same as you do for placing your containers within containers.

Direction

You are typically setting to Horizontal or Vertical, to work with the widgets or containers you place inside inside as rows or columns

Width

The first container you typically want to leave as “boxed”, so it is limited to the main page area.

But for all container within you typically want to select “full width” instead, so that when you change the width value you are changing the container width itself, not an imaginary container within it.

Good width approaches when making an area thinner so it looks more punchy

Desktop – set in pixels
Tablet – often 80% is a good setting
Mobile – often 85-90% is a good setting

Align

Align items

How you want all the items/containers within this container to align.

When you use it, items within the container become the width they are, not full width as they are by default.
Remember, it will only work if there is space for the items to move whtin that container
NOTE-Align items does not change text alignment, it is setting the alignment of the containers within that cotnainer, you still need to select center align for text so that it center aligns, e.g. when it goes multiline say when viewed on mobile.

Align self (advanced tab)

Override the parent containers align items setting for this item/container.

E.g. you have a contaner that is set to align items to the top, and set one of the items to align self to bottom and it will move to the bottom.
Same for items aligned left ofd center, but you want a button to align to the right.

Justify content

Can be useful to set to give space between items.

Gap between elements is often mor useful though (see below)

Size > Grow (Advanced tab)

Really useful! Makes the item/container grow (in the direction the parent container is set to) to the maximum size possible within the space avaialble. All the other items will be forced to move to let it grow.

e.g. Make text boxes all the same height to a button under them or their parent containers heigh all move to the be the same event though the text in different ones is different length.

Gap between elements

Great to create a space between containers used as columns etc

Wrapping – Columns and wrapping

When working in horizontal direction by default if items are too wide to fit in a horizontally aligned container they won’t get moved to a new row, Elementor will just squeeze them in and ignore your width request settings on them if it has to. This can be especially bad when you move to a smaller mobile screen and you’d prefer, say the 4 columns you created, to change to only 1 column wide.

To solve this, turn on wrapping for the container . Now it will move items/containers to a new row when the items won’t fit within the containers width.

So for multiple columns you turn on wrapping and then set the width of the items/containers that are the columns. You can then set their width for desktop/table/mobile, e.g. 100% on mobile, 50% on table and 25% on desktop.

Using empty containers with size=grow can be useful with this too, to fill in unused space and keep the containers with real content as you want them.

Order

Can be useful to have an item/container move to the start or end of the parent container when viewed on table or mobile. For example an image that is on the right on desktop you want to move the top / above the text when on mobile.

Customer order is a way to provide re-ordering of multiple items, by giving each a number that increments.