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 the space email clients' interfaces take up, not a rule.
A better question is: what grid makes emails quick to design, quick to build and consistent every time? After years of building email design systems for brands of every size, the answer we keep coming back to is a 640px, 12-column grid on desktop with a matching 320px, 6-column grid on mobile. This post explains how it works, why the numbers are what they are, and the asset sizes you'll actually use.
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 the most demanding email client, classic Outlook for Windows, renders HTML using the Microsoft Word engine. Imagine laying out a design in a word processor: columns are tables, and the only way to make complex layouts is to 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 single biggest factor in how fast an email can be produced. When every design uses the same column widths, the layouts are already coded and waiting in your design system. When a design breaks out of the grid with an arbitrary 347px column or an image that overlaps a button, the developer 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.
It's used for any screen wider than 640px. The numbers aren't arbitrary: they make every common column width 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 the code, mobile column widths are set as percentages, so on a 390px phone the layout simply scales up to fill the screen. Because desktop is exactly double mobile, the same image can be used at both breakpoints without extra code or extra assets.
Column widths you'll actually use
Every width in the grid follows one simple formula. A block that spans n columns is:
width = 50 × n − 20
That gives you every width you'll need on desktop, and the image size to export at double resolution:
| Columns spanned | Display width | Export at @2x | Typical use |
|---|---|---|---|
| 12 | 580px | 1160px | Hero images, single-column modules |
| 9 | 430px | 860px | Wide column in a 3:1 layout |
| 8 | 380px | 760px | Wide column in a 2:1 layout |
| 6 | 280px | 560px | Two-column layouts |
| 4 | 180px | 360px | Three-column layouts, the narrow side of 2:1 |
| 3 | 130px | 260px | Four-column layouts, icons and thumbnails |
| 2 | 80px | 160px | Small icons and logos |
Sizing images: double it, and keep the ratio
Every image in an email should be exported at twice its display size so it stays sharp on high-resolution screens. That now includes most laptops, not just phones. The simplest workflow is to design at actual size (640px desktop, 320px mobile) and keep all assets as vectors or smart objects so they can be exported at @2x. Resolution settings like 300ppi are for print and make no difference to images on screen.
A less obvious rule: images in small modules get bigger on mobile. A four-column thumbnail that is 130px wide 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. If a square works on desktop, use a square on mobile too.
Going beyond 640px
Treat 640px as a safe zone rather than a hard limit. All images and text should sit inside it, but anything that can be drawn with code can extend beyond it. Module background colours, for example, can run the full width of the screen to break up sections or highlight a feature. If a campaign genuinely needs a wider layout, such as a large pull-quote or a high-impact hero, wider breakpoints are possible. Just expect them to work in some email clients and not others, and make sure the 640px version still looks right.
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. But if your emails are being designed one at a time with whatever widths look right on the day, adopting a single shared grid is the quickest win available. Designers get a clear framework, developers stop building one-off layouts, and every email starts to look like it belongs to the same brand.
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 that anyone in your team can assemble into new emails in minutes. Once the grid is agreed, typography, buttons and modules all slot into place around it.
We build email design systems on this grid for Stripo, Taxi for Email, HubSpot, MailChimp and other platforms. If you'd like help putting one in place, book a free consultation.