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

Question

我正在使用 NopCommerce 制作 HTML 电子邮件模板。从那以后我把所有的 CSS 都放在内联中，但不起作用，在大多数情况下，除了网格样式之外，所有内容都有效。具体来说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/

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