如何基于可用空间动态调整TailwindCSS卡片的行列布局？

当然可以实现，以下几种方案能满足你“根据可用空间自动切换子元素排列方向”的需求：

方案一：基于屏幕尺寸的响应式切换 #

直接利用Tailwind的响应式前缀，在指定屏幕宽度阈值上切换flex方向：

<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>

  <!-- 屏幕宽度≥md（默认768px）时切换为纵向排列 -->
  <div class="flex flex-wrap justify-between gap-4 border md:flex-col md:justify-between">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>

方案二：基于卡片自身宽度的容器查询切换 #

如果想根据卡片容器的实际可用宽度而非全局屏幕尺寸触发切换，可以用Tailwind v3.2+支持的CSS容器查询：

1. 先配置自定义容器查询断点（CDN方式）：

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    container: {
      queries: {
        'card-enough-space': '(min-width: 300px)',
      },
    },
  }
}
</script>

2. 应用容器查询类控制布局：

<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="container flex flex-wrap justify-between gap-4 border card-enough-space:flex-col card-enough-space:justify-between">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>

当卡片宽度超过300px时，自动切换为纵向排列，小于该宽度时保持横向。

方案三：纯CSS原生实现 #

不依赖Tailwind工具类，直接用CSS容器查询编写逻辑：

<script src="https://cdn.tailwindcss.com"></script>
<style>
.dynamic-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #e5e7eb;
}

@container (min-width: 300px) {
  .dynamic-card {
    flex-direction: column;
  }
}
</style>
<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="dynamic-card">
    <div class="flex-grow">Content 4</div>
    <div class="flex-grow">Content 5</div>
  </div>
</div>

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