如何根据可用空间更改列/行行为？

Question

我有一组卡片，它们有自己的卡片，就像这样（我正在使用 TailwindCSS 顺便说一句）：

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-wrap justify-between gap-4 border">
    <div class="flex-grow">Content 1</div>
    <div class="flex-grow">Content 2</div>
    <div class="flex-grow">Content 3</div>
  </div>

  <div class="flex flex-wrap justify-between gap-4 border">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>

最终结果会是这样的，这很好： 显示卡片渲染结果的图像

但是根据屏幕尺寸，我可以得到这样的结果：

显示第二张卡上有间隙的卡的渲染结果的图像

所以，我想做的是，当有可用空间时，“迷你卡”的行为就像行而不是列，就像这样（但动态）：

显示第二张卡片上没有间隙的卡片渲染结果的图像

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-wrap justify-between gap-4 border">
    <div class="flex-grow">Content 1</div>
    <div class="flex-grow">Content 2</div>
    <div class="flex-grow">Content 3</div>
  </div>

  <div class="flex flex-wrap flex-col justify-between gap-4 border">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>

有没有办法用 CSS 来实现这一点？

Answer 1

如果使用 Flexbox 作为外部容器而不是 Grid 怎么样？

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex gap-4">
  <div class="flex flex-wrap justify-between gap-4 border">
    <div class="flex-grow">Content 1</div>
    <div class="flex-grow">Content 2</div>
    <div class="flex-grow">Content 3</div>
  </div>

  <div class="flex flex-wrap justify-between gap-4 border">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>