Skip to main content

display:grid in Outlook 365

SupportedOutlook Web · webmail

Support Details

Replace CSS Grid with table layout for email compatibility.

Before

<div style="display: grid;
            grid-template-columns: 1fr 1fr; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

After

<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td width="50%" style="padding: 8px;" valign="top">
      Item 1
    </td>
    <td width="50%" style="padding: 8px;" valign="top">
      Item 2
    </td>
  </tr>
</table>

Replace CSS Grid with table layout for email compatibility

display:grid is fully supported in Outlook 365. No workarounds needed.

Other Clients

ClientSupport
GmailUnsupported
Gmail AndroidUnsupported
Gmail iOSUnsupported
Outlook (New)Unsupported
Outlook ClassicUnsupported
Outlook iOSUnsupported
Outlook AndroidUnsupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailUnsupported
Samsung MailSupported
ThunderbirdSupported
HEY MailSupported
SuperhumanSupported

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free