是否存在Gmail、Outlook支持的display: grid替代方案？

首先目前绝大多数主流邮件客户端均不支持display: grid全量属性，不存在可直接替代grid同时兼容全邮件端的CSS方案，唯一通用的实现方式是使用原生HTML嵌套表格还原布局。

你提供的grid布局可拆解为3级行结构，完全可以用表格实现等宽效果：

• 第一行拆分2列，宽度占比为15:5，对应原布局的黑色、红色区块
• 第二行拆分3列，宽度占比为3:4:3，对应原布局的绿色、灰色、蓝色区块
• 第三行拆分2列，宽度占比为10:10，对应原布局的黄色、紫色区块
  原布局的10px间距可以通过空白单元格、td的padding属性实现，行高要求可通过td的height属性配置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 邮件端通用viewport设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0;padding:0;">
<!-- 外层总表格，cellspacing直接对应原布局gap属性 -->
<table width="100%" border="0" cellpadding="0" cellspacing="10" style="border-collapse: separate;">
  <!-- 第一行：黑+红 -->
  <tr>
    <td width="75%" height="240px" bgcolor="black" style="color:#fff;">One</td>
    <td width="25%" height="240px" bgcolor="red">Two</td>
  </tr>
  <!-- 第二行：绿+灰+蓝 -->
  <tr>
    <td width="30%" height="90px" bgcolor="green">Three</td>
    <td width="40%" height="90px" bgcolor="gray">text</td>
    <td width="30%" height="90px" bgcolor="blue">Four</td>
  </tr>
  <!-- 第三行：黄+紫 -->
  <tr>
    <td width="50%" height="150px" bgcolor="yellow">Five</td>
    <td width="50%" height="150px" bgcolor="purple">Six</td>
  </tr>
</table>
</body>
</html>

注：上述代码中的高度是根据你原grid设置的行高换算得出，可根据实际内容调整数值，兼容性覆盖99%以上的邮件客户端。

• 邮件端HTML不建议使用任何CSS Grid、Flex相关属性，所有布局优先用表格实现
• 所有样式尽量写内联，不要用head里的class选择器，部分邮件客户端会过滤头部样式
• 固定间距优先用空白单元格或者cellpadding/cellspacing属性，比CSS margin兼容性更好

内容的提问来源于stack exchange，提问作者Eran Helbitz