You paste a prompt into ChatGPT: Write me a promotional email HTML with a hero image product grid and CTA button.
It gives you beautiful, modern code. Flexbox layout. CSS Grid for the product cards. Custom fonts. Gradient backgrounds.
You test it in Chrome. Perfect. Gmail? Looks great. You send it to your client.
Then comes the screenshot from Outlook 2019.
Your flexbox is gone. The grid collapsed into a single column. Buttons have no padding. The gradient background is white. Your client's brand is ruined.
Why This Happens
While Gmail, Apple Mail, and iOS Mail use WebKit or similar modern rendering engines, Microsoft Outlook uses Microsoft Word's engine.
Yes, the word processor from 2007. It was designed for printing documents, not rendering HTML.
Word's engine lacks support for:
- CSS Grid and Flexbox
- Modern CSS selectors
- Custom fonts (@font-face)- CSS transforms and animations
- Proper box model
So every time GPT-4 generates display: flex, Outlook renders it as display: block — or worse.
The Email Developer's Workaround
The only reliable way to create consistent layouts across all email clients is to use HTML tables for layout. This feels like a step back to 1999, but it's the reality of email development in 2026.
Here's what works:
Top comments (0)