内联网格相关 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。

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

Inline Grid related CSS disappear in Gmail

html

css

html-email

grid-layout