邮件兼容CSS布局求助：替代Grid/Flex的内联CSS方案

我在编写UI的CSS时遇到瓶颈，寻求可替代的CSS代码方案。原本使用Grid布局，之后改用Flex布局，但将所有样式改为内联CSS发送至Gmail后，部分属性被删除导致布局错乱（附图：Gmail布局错乱效果），需要协助解决该问题。

当前使用的Grid布局代码 #

CSS代码 #

.list, .item {
  padding: 10px;
  margin: 10px;
}
.list {
  border: 1px solid red;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.item {
  border: 1px solid green;
}

HTML代码 #

<div class='list'>
  <div class='item'>
    left
  </div>
  <div class='item'>
    right
  </div>
</div>
<div class='list'>
  <div class='item'>
    center
  </div>
</div>

尝试改用的Flex布局代码 #

CSS代码 #

.list, .item {
  padding: 10px;
  margin: 10px;
}
.list {
  border: 1px solid red;
  display: flex;
  gap: 15px;
}
.item {
  border: 1px solid green;
  flex-grow: 1;
}

HTML代码 #

<div class='list'>
  <div class='item'>
    left
  </div>
  <div class='item'>
    right
  </div>
</div>
<div class='list'>
  <div class='item'>
    center
  </div>
</div>

内容的提问来源于stack exchange，提问作者IT All