Create Multi-Column Layouts

Multi-column layouts let you place content side by side — perfect for product grids, feature comparisons, or pairing an image with text. The row block is your layout tool for this.

Add a Row Block

Drag the Row block from the block palette onto your canvas.
A layout selector appears in the settings panel. Choose from one of the preset column arrangements.

Column Layouts

Templated offers 11 preset layouts:

Full width — 1 column (100%)
50 / 50 — 2 equal columns
33 / 33 / 33 — 3 equal columns
25 / 25 / 25 / 25 — 4 equal columns
66 / 33 — Two-thirds and one-third
33 / 66 — One-third and two-thirds
25 / 75 — One-quarter and three-quarters
75 / 25 — Three-quarters and one-quarter
25 / 50 / 25 — Narrow, wide, narrow
50 / 25 / 25 — Wide, narrow, narrow
25 / 25 / 50 — Narrow, narrow, wide

Click More layouts in the settings panel to see all available options. Selecting a layout automatically creates the corresponding columns inside the row.

Add Content to Columns

Each column acts as a container. Drag any block type — text, buttons, images, spacers — into a column to add content. You can stack multiple blocks inside a single column.

Configure Row Settings

Column Gap

Use the Column Gap slider to adjust the horizontal space between columns, from 0px to 48px.

Background Color

Set a background color for the entire row. This fills the space behind all columns, which is useful for creating colored sections.

Padding

Adjust the padding around the row using the top, right, bottom, and left controls.

Border Radius

Add rounded corners to the row container using the border radius slider.

Configure Individual Columns

Click a specific column to select it and access its settings:

Vertical Alignment — Align content within the column to the Top, Middle, or Bottom. This is useful when columns have different amounts of content.
Background Color — Set a background color for an individual column, independent of the row background.
Padding — Add internal spacing around the column content.
Border Radius — Round the corners of an individual column.

Mobile Stacking

On mobile devices, multi-column layouts automatically stack into a single column so content remains readable. You can configure this behavior in the row's responsive settings:

Stack on mobile — Columns stack vertically on small screens (enabled by default).
Reverse order on mobile — Reverses the column order when stacked. This is helpful when you want a specific column to appear first on mobile even though it appears second on desktop.
Mobile padding — Set padding values specifically for mobile views.

Containers

If you need a simple wrapper for a group of blocks without columns, use the Container block. Containers let you apply a background color, padding, margin, and border radius to a section of your email. They also support mobile stacking and reverse order options.

Tips

Two-column layouts are the most versatile. Three and four-column layouts work well for icon grids or product listings but can feel cramped with long text.
Test your column layouts in mobile preview — content that looks great in three columns on desktop may need to stack on mobile.
Use column vertical alignment to keep content visually balanced when columns have uneven content heights.

Use the Email Editor
Add and Format Text
Add an Image
Use Spacers and Dividers