CSS网格和基于内容的列大小

Question

我不确定该如何表达。最终，我想让内容确定要跨越多少行。具有下一项从下一列开始。无论出于什么原因，我都无法弄清楚。似乎flexbox或grid都可以完成。

因此，如果我有一个项目网格，并且其中一个项目确实很长，我希望它保持一行，而不是跨更多的列。也不能自动放置。

   <div class="wrapper">
     <div class="box">A</div>
     <div class="box">B</div>
     <div class="box">C</div>
     <div class="box">D</div>
     <div class="box">E Long box here</div>
     <div class="box">F</div>
     <div class="box">G</div>
   </div>

在这种情况下，我应该喜欢

   A      B      C      E
   E long box here      F
   G      H

相反，我尝试使用CSS网格的所有操作只会将e粉碎为一列，当我使用flexbox项F，G，H不再与网格对齐时