如何为SendGrid邮件模板实现中间留空的4图网格布局？

原有方案问题说明 #

你之前的实现思路不适用于邮件模板场景：

• 绝大多数邮件客户端（包含SendGrid的渲染环境）对position: relative的偏移属性支持度极低，部分客户端会直接屏蔽该属性的定位效果，因此top偏移设置无法生效
• 负margin属于邮件服务商安全校验的拦截范围，确实无法在邮件模板中正常使用

兼容最优实现方案 #

邮件模板开发首选HTML原生表格布局，兼容性覆盖所有主流邮件客户端，不需要用到浮动、定位等兼容表现差的属性，就能实现中间留空的四图网格效果：
实现逻辑为用3列的表格结构，把中间列固定为留空宽度，四幅图片分别放在第一列奇数行、第三列偶数行的位置，刚好形成四角排布中间留空的效果，示例代码如下：

<!-- 外层表格总宽度可根据你的模板需求调整 -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <!-- 第一行：左上图片 -->
  <tr>
    <td width="290" align="center">
      <img src="替换为左上图片地址" width="290" alt="" style="display:block;border:0;">
    </td>
    <!-- 中间固定留空列 -->
    <td width="20"></td>
    <td width="290"></td>
  </tr>
  <!-- 上下图片间距，高度可自定义 -->
  <tr><td height="20"></td><td></td><td></td></tr>
  <!-- 第二行：右上图片 -->
  <tr>
    <td width="290"></td>
    <td width="20"></td>
    <td width="290" align="center">
      <img src="替换为右上图片地址" width="290" alt="" style="display:block;border:0;">
    </td>
  </tr>
  <tr><td height="20"></td><td></td><td></td></tr>
  <!-- 第三行：左下图片 -->
  <tr>
    <td width="290" align="center">
      <img src="替换为左下图片地址" width="290" alt="" style="display:block;border:0;">
    </td>
    <td width="20"></td>
    <td width="290"></td>
  </tr>
  <tr><td height="20"></td><td></td><td></td></tr>
  <!-- 第四行：右下图片 -->
  <tr>
    <td width="290"></td>
    <td width="20"></td>
    <td width="290" align="center">
      <img src="替换为右下图片地址" width="290" alt="" style="display:block;border:0;">
    </td>
  </tr>
</table>

注意事项 #

• 所有图片强制添加style="display:block;border:0"属性，避免邮件客户端默认给图片添加额外间隙和边框
• 表格的cellpadding、cellspacing、border属性统一设置为0，规避不同客户端的默认表格样式干扰
• 该方案不依赖任何浮动、定位、负margin属性，可在SendGrid邮件环境中正常渲染

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