Era*_*itz 1 html css gmail html-email css-grid
我为自己感到非常自豪，因为我设法为客户制作了我想要的自定义网格，但后来我被告知它也需要适用于电子邮件。尝试在网络上寻找不同的 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>对电子邮件的支持CSS很差，引用率约为 45%：CSS 支持Head-Style
inline-style因此，总的来说，您在设计电子邮件模板时应该遵循这一点。
CSS-Grid（~59% 支持）和（~59% 支持）都Flexbox没有得到电子邮件客户端的合理支持。
引用：CSS-Grid 支持
引用：Flexbox 支持
您唯一能做的就是使用<table>具有 100% 可靠支持的 HTML 解决方案。它不是表格数据，但对于电子邮件模板来说可以接受，因为它是唯一完全支持的方法！
引用: 表支持
电子邮件模板：
如上所述，我们必须使用表格。与 等价的是直接在表本身上使用+grid-gap的组合：border-collapse: seperate;border-spacing: value;<table style="border-collapse: seperate; border-spacing: 10px;">
为了模仿你，我从一个有 20x 的grid-template-columns: repeat(20, 1fr);空开始<tr><td width="5%">
现在，我们可以使用 -attributecolspan来跨越多个列，就像grid-column: spanX
要模拟最小高度，您只需应用与表格height相同的 - 属性，min-height因为如果内容较大，表格单元格将调整大小。我只是将你的 30px 乘以你想要跨越的行数。
要使文本从左上角而不是表格单元格的中心开始，您必须应用：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>