4 个中间有空白区域的图像面板网格（用于电子邮件模板）

【问题标题】：4 image panel grid with empty space in the middle (for email template)4 个中间有空白区域的图像面板网格（用于电子邮件模板）
【发布时间】：2021-08-22 09:22:50
【问题描述】：

我正在尝试以下图的方式重新创建这 4 个图像结构，但是，我正在为电子邮件模板执行此操作，因此边距减号不起作用。

一般情况下，我尝试将图像向左浮动并将边距减号替换为：

position: relative; top: -px;

，但这也行不通。我是否以正确的方式处理这个问题？或者有没有更简单的方法来做这件事。

（电子邮件模板在 SendGrid 中完成）

【问题讨论】：

标签： html css image sendgrid

【解决方案1】：

您可以尝试使用 css 网格和网格区域：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  justify-content: center;
}
.item {
  padding: 1em;
}
.div1 { 
  grid-area: 1 / 1 / 2 / 3; 
  border: 1px solid red;
}
.div2 { 
  grid-area: 2 / 1 / 4 / 2; 
  border: 1px solid purple;
}
.div3 { 
  grid-area: 1 / 3 / 3 / 4; 
  border: 1px solid green;
}
.div4 { 
  grid-area: 3 / 2 / 4 / 4; 
  border: 1px solid blue;
}

<div class="item">text</div>
<div class="container">
  <div class="div1 item"> 1</div>
  <div class="div2 item"> 2</div>
  <div class="div3 item"> 3</div>
  <div class="div4 item"> 4</div>
</div>

【讨论】：