Search code examples
htmlcsshtml-emailgrid-layout

Inline Grid related CSS disappear in Gmail

I am working on a HTML email template using NopCommerce. I've put all my CSS inline since and doesn't work, for the most part everything works except for the Grid styles. Specifically grid-gap and grid-template-columns as they seem to disappear after being sent to Gmail. The code snippet below is the original code prior to being sent.

<div class="grid-container" style="display: grid; grid-gap: 10px; background-color: white;margin-top:10px;left-padding: 10px; text-align:center; grid-template-columns: 33% 33% 33%;">
    <div style="background-color: #ebebe0;">
        <h1>Title 3</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 4</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 5</h1>
        <p>Lorem Ipsum</p>
    </div>
</div>

image

Image above was taken from the Gmail, and as you can see grid-gap and grid-template-columns seem to be missing. Can anyone give me pointers or solutions to this problem? Much appreciated.

Solution

  • This is because grid and most recent CSS novelties are not supported on most email clients because of integration problems, security and network. Consult this useful guide to learn what works and what doesn't on which email clients :

    https://www.campaignmonitor.com/css/

    For example : only Aol Alto, Thunderbird, Outlook (Mac and Android) and iOS > 10 support grid for now.