The 640px email grid: column widths and asset sizes you'll actually use

Ask ten email designers how wide an email should be and most will say 600px. It's a number that has been passed around for so long that few people question where it came from. It was a rough compromise for small screens and busy client chrome — not a rule.

A better question: what grid makes emails quick to design, quick to build and consistent every time? The answer we keep coming back to is a 640px, 12-column grid on desktop with a matching 320px, 6-column grid on mobile. Brandblox Emails uses the same mental model: a calculated layout grid so every Blox lines up.

Why the grid matters more than the width

An email layout is boxes inside boxes. Under the hood, most emails are still built with tables, because classic Outlook for Windows renders HTML with the Microsoft Word engine. Columns are tables; complex layouts nest more tables inside them. You can't overlap content, and everything needs to line up to the pixel.

That's why a consistent grid is the biggest factor in how fast an email can be produced. When every design uses the same column widths, layouts are already waiting in your system. When a design breaks out with an arbitrary 347px column or an image that overlaps a button, someone has to build something bespoke — and that's where hours disappear.

The 12-column desktop grid

The desktop grid is 640px wide with 12 columns. Each column is 30px, separated by 20px gutters, with a 30px margin on each side. That leaves a 580px content area in the middle.

Use it for any screen wider than 640px. The numbers aren't arbitrary: every common column width is a multiple of 10, which makes widths easy to remember and assets easy to size.

The 6-column mobile grid

The mobile grid is exactly half the desktop grid: 320px wide with 6 columns of 30px, 20px gutters and 20px margins, leaving a 280px content area.

In code, mobile column widths are percentages, so on a 390px phone the layout scales up to fill the screen. Because desktop is exactly double mobile, the same image can work at both breakpoints without extra assets.

Column widths you'll actually use

Every width follows one formula. A block that spans n columns is:

width = 50 × n − 20

That gives you every width you need on desktop, and the image size to export at double resolution:

Sizing images: double it, and keep the ratio

Export every image at twice its display size so it stays sharp on high-resolution screens — including most laptops, not just phones. Design at actual size (640px desktop, 320px mobile) and keep assets as vectors or smart objects so you can export at @2x. Resolution settings like 300ppi are for print and make no difference on screen.

A less obvious rule: images in small modules get bigger on mobile. A four-column thumbnail that is 130px on desktop stacks to full width on a phone. So:

• Export any image that might appear in a two-column module or smaller at a minimum of 560px wide (280px @2x).
• Export hero and single-column images at a minimum of 1160px wide (580px @2x).
• Keep the same aspect ratio on desktop and mobile so one asset works at both breakpoints.

Going beyond 640px

Treat 640px as a safe zone rather than a hard limit. Keep text and images inside it; anything drawn with code — module background colours, for example — can run full width. Wider breakpoints are possible for high-impact heroes, but expect uneven client support and keep the 640px version solid.

When not to use this grid

If your brand already has strict email layout guidelines, follow those. The goal is consistency, not this particular set of numbers. If emails are designed one at a time with whatever widths look right on the day, adopting a single shared grid is the quickest win available.

The grid is the foundation of a design system

A shared grid is the first building block of an email design system: a library of pre-built, on-brand modules anyone can assemble in minutes. Once the grid is agreed, typography, buttons and modules slot in around it — the same path Brandblox takes from Brands tokens into Emails Blox in the brand system model.

Next: What is an email design system?