CSS实现从两列到三列的响应式布局问题求助

我想要实现一种特殊的响应式布局，从小屏幕的两列自动扩展到大屏幕的三列，其中只有两个容器的高度可以自适应增长。我已经画出了预期效果的示意图，也完成了两列布局的实现，但不知道怎么用CSS Flexbox扩展到三列。

我选择Flexbox是因为它最接近我的需求，但解决方案不限于Flexbox。

场景说明 #

• 总共5个容器
• 3个容器为固定高度，2个容器高度可自适应增长
• 小屏幕下为两列布局，大屏幕下为三列布局
• 两列布局时容器宽度为父元素的50%，三列布局时为父元素的33%

现有代码示例 #

JavaScript #

let wf = 0.5;
let wm = 500;

function simulateWidthUpdate() {
  const g = document.getElementById('grid')
  wf = wf == 1 ? 0.5 : 1;
  g.style.width = parseInt(wf * wm) + 'px';
}

CSS #

button {
 margin: 10px 0;
}

#grid {
  border: 1px solid red;
  width: 250px;
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  border-radius: 10px;
  background: #233C3C;
  color: #fff;
  padding: 10px;
  text-align: center;
  flex-grow: 0;
  max-width: 100px;
  width: 100%;
}

#item-c,
#item-d {
  flex-grow: 1;
  min-height: 200px;
}

#item-a {
   height: 20px;
}


#item-b {
   height: 40px;
}

#item-e {
   height: 50px;
}

HTML #

<button onclick="simulateWidthUpdate()">Alternate Width</button>
<div id="grid">
  <div class="item" id="item-a">A</div>
  <div class="item" id="item-c">B</div>
  <div class="item" id="item-e">C</div>
  <div class="item" id="item-b">D</div>
  <div class="item" id="item-d">E</div>
</div>

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