css - 使 flex 或 css 网格表现为非清除浮动？

Question

我有 5 个项目在移动页面上运行：

<div class="flex flex-wrap flex-row">
  <div class="order-1">item 1</div>
  <div class="order-2">item 2</div>
  <div class="order-3">item 3</div>
  <div class="order-4">item 4</div>
  <div class="order-5">item 5</div>
</div>

但在桌面上，我希望它看起来像这样：

注意列的宽度是动态的，框的高度也是动态的。

我已经尝试过 CSS Grid 和 Flexbox，但问题是两种策略上的相等列意味着项目之间存在空白，这是我不想要的（注意行网格线不对齐）。

我知道这可以通过浮动来实现，但我想摆脱它，只依赖 flexbox/grid。

我怎样才能做到这一点？

标签： cssflexboxcss-gridtailwind-css