与内联网格相关的CSS在Gmail中消失了

Question

我正在使用NopCommerce处理HTML电子邮件模板。从那以后，我将所有CSS都内联并且不起作用，除了Grid样式外，大多数情况下一切正常。特别是grid-gap和grid-template-columns，因为它们在发送到Gmail后似乎消失了。下面的代码段是发送前的原始代码。

<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>

上面的图片是从Gmail拍摄的，可以看到grid-gap和grid-template-columns似乎丢失了。谁能给我指出或解决这个问题的方法吗？非常感谢。

Answer 1

这是因为由于集成问题，安全性和网络问题，大多数电子邮件客户端不支持grid和最新的CSS新功能。请查阅此实用指南，以了解哪些电子邮件客户端有效，哪些无效：

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

例如：目前仅Aol Alto，Thunderbird，Outlook（Mac和Android）和iOS> 10支持grid。