Layouts with Div block, Flexbox and Grid

Forget sections and columns. In Elementor 4 a page is made of layout elements that hold other elements, and they can nest as deep as you need. There are three:

Drag a Flexbox onto the canvas and put three Buttons inside it. Then open Style › Layout:

• Direction: row (side by side, the default) or column (stacked).
• Justify content: where children sit along the direction (start, center, end, space-between).
• Align items: where they sit across it, for example vertically centred in a row.
• Gaps: the space between children, as a column and a row value that start linked. Use it instead of margins on each child.
• Wrap: allow items to move to the next line when they run out of room.

When things need to line up both across and down, as in a card grid, use Grid. A new Grid starts with 3 columns, 2 rows and a 20 px gap, so a card grid is ready as soon as you drop it in.

1. Drag in a Grid. In Style › Layout, set Columns and Rows to the numbers you need.
2. Drop a Div block in each cell for the cards, then put a Heading and Paragraph inside each card.
3. Set Gaps once on the Grid. Every card gets the same spacing.
4. Switch to tablet and set 2 columns, then switch to mobile and set 1. The cards reflow automatically.

Put it together. This is the structure behind most hero sections, including the ones in the Katka templates:

1. Add the outer Flexbox. Set the direction to row, align items to center and the gap to 48 px. Give it padding of about 80 px top and bottom.
2. Inside it, add a column Flexbox for the text and an Image next to it.
3. Fill the text column with a Heading (set the tag to h1), a Paragraph and a row of two Buttons.
4. Switch to mobile and set the outer Flexbox to column. The image drops under the text.
5. Rename each layout element in Structure. In two weeks, "Hero text" will mean more to you than "Flexbox".

Two habits keep layouts clean:

• Limit width on an inner box, not the page. Keep the outer box full-width (for the background), and give an inner box a Max width such as 1200 px, with automatic left and right margins to centre it.
• Padding on parents, gap between children. Avoid adding margin to every element. It's the main reason layouts drift on mobile.

• Using Flexbox for card grids. Cards with different text lengths stop lining up. Use Grid when there are both rows and columns.
• Nesting "just in case". Every extra box is one more thing to style and select. Add a wrapper only when it does a job.
• Fixed heights. A fixed height looks fine until the text gets longer or the screen gets narrower. Let content set the height, and use min-height if you need a floor.