是否有替代显示：gmail and/or outlook 支持的网格？

Question

为自己设法为客户制作了我想要的自定义网格而感到非常自豪，但后来我被告知它也需要用于电子邮件。尝试在网络上寻找不同的 display: grid 替代方案，但找不到。

是否存在这样的替代方案？如果没有和建议？

我做的网格供参考：

<!DOCTYPE html>
<html>
<head>
<style>

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(30px, auto);
  
  
}
.one {
  grid-column: 1 / 16;
  grid-row: 1 / 9;
  background-color: black;
}
.two {
  grid-column: 16 / 21;
  grid-row: 1 / 9;
  background-color: red;
}
.three {
  grid-column: 1/7;
  grid-row: 9 / 12;
  background-color: green;
}
.four {
  grid-column: 15/21;
  grid-row: 9/12;
  background-color: blue;
}
.five {
  grid-column: 1/11;
  grid-row: 12/17;
  background-color: yellow;
}
.six {
  grid-column: 11/21;
  grid-row: 12/17;
  background-color: purple;
}
.seven {
  grid-column: 7/15;
  grid-row: 9/12;
  background-color: gray;
}


</style>
</head>
<body>

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">text</div>
</div>


</body>
</html>

Answer 1

对 CSS 或 Head-Style 的支持对于 ~45%
的电子邮件来说非常差 citatation: CSS support

总的来说，在设计电子邮件模板时，您应该参考 inline-style。

CSS-Grid（~59% 支持）和 Flexbox（~59% 支持）都没有得到电子邮件客户端的合理支持。
citatation: CSS-Grid support
citatation: Flexbox support

您唯一能做的就是使用 <table>，因为它是 HTML 解决方案，所以获得了 100% 的可靠支持。它不是表格数据，而是电子邮件模板 acceptable 因为它是唯一完全支持的方法！
citatation: table support

电子邮件模板：

如上所述，我们必须使用table。 grid-gap 的等价物是 border-collapse: seperate; + border-spacing: value; 的组合，直接用于 table 本身：<table style="border-collapse: seperate; border-spacing: 10px;">

为了模仿你的 grid-template-columns: repeat(20, 1fr);，我从一个空的 <tr> 开始，它有 20x <td width="5%">

这现在允许我们使用 colspan 属性来跨越多个列，就像 grid-column: spanX

要模拟最小高度，您只需应用 height 属性，该属性与 table 的 min-height 相同，因为 table 单元格将如果内容较大，则调整大小。我只是把你想要跨越的行数乘以你的 30 像素。

要让文本从左上角开始而不是 table 单元格的中心，您必须应用：text-align:left; vertical-align:top; 到每个 <td>.

<table width="100%;" style="border-collapse: seperate; border-spacing: 10px;">
  <tr>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
  </tr>
  <tr height="240px">
    <td colspan="15" style="background-color:black; color:white; text-align:left; vertical-align:top;">one</td>
    <td colspan="5" style="background-color:red; text-align:left; vertical-align:top;">two</td>
  </tr>
  <tr height="90px">
    <td colspan="6" style="background-color:green; text-align:left; vertical-align:top;">three</td>
    <td colspan="8" style="background-color:gray; text-align:left; vertical-align:top;">text</td>
    <td colspan="6" style="background-color:blue; text-align:left; vertical-align:top;">four</td>
  </tr>
  <tr height="150px">
    <td colspan="10" style="background-color:yellow; text-align:left; vertical-align:top;">five</td>
    <td colspan="10" style="background-color:purple; text-align:left; vertical-align:top;">six</td>
  </tr>
</table>

是否有替代显示：gmail and/or outlook 支持的网格？

is there an alternitive to display: grid that is supported for gmail and/or outlook?

html

css

gmail

html-email

css-grid