Skip to main content

How to create balanced layouts with odd columns in email

Updated

The email Visual Builder uses a 12-column grid, so odd-numbered columns, such as columns 5 or 7, can’t be split into equal widths. This article explains why and shows two ways to create a balanced layout or control column widths with custom HTML.

Understand why odd column counts don’t split evenly

The builder uses a 12-column grid for each row. This system is common in responsive email and web design because 12 divides evenly by 2, 3, 4, and 6.

For example:

  • 2 columns: 6 + 6
  • 3 columns: 4 + 4 + 4
  • 4 columns: 3 + 3 + 3 + 3
  • 6 columns: 2 + 2 + 2 + 2 + 2 + 2
  • 5 columns: no equal split because 5 isn’t a divisor of 12

A 10-column grid would let you split five columns evenly, but three-, four-, and six-column rows wouldn’t divide evenly. Every fixed-column grid supports some column counts and limits others.

Create a balanced layout with uneven column widths

You can approximate five equal columns by combining widths that add up to 12. For example, use the pattern 2-3-2-3-2.

  1. Select the row in your email and open its column settings.
  2. In the Customize columns panel, set the column widths to 2, 3, 2, 3, and 2.
  3. Add your content, such as images, text, or buttons, to each column.
  4. Adjust the padding and sizing so the visible content looks consistent across all five columns.

  5. Preview the email on desktop and mobile to confirm that the row looks balanced at different widths.

    Screenshot 2026-09-30 at 6.57.15 AM.png

Done well, this technique can produce a row that looks close to five equal columns, as in the example below.

Screenshot 2026-09-30 at 6.57.52 AM.png
This workaround doesn’t create a true equal split so that it won’t be pixel-perfect. It works best with simple content, such as one image or icon per column. Columns with multiple text elements of different lengths can be harder to balance.

Use custom HTML for exact column widths

If you need an exact split across any number of columns, use custom HTML instead of the drag-and-drop column layout.

  1. Add an HTML content block to your row.
  2. Insert a table with the number of columns you need.
  3. Set a fixed width in pixels or percentages on each <td> element.

Custom HTML gives you control over each column’s width, but you’re responsible for the table’s responsiveness and rendering across email clients. Test the layout thoroughly before sending.