Grid 与 Flexbox 协同使用：构建复杂响应式布局

代码说明：这个案例中，Grid 负责页面大的区块划分（行和列的整体布局），而 Flexbox 则负责处理每个区块内部的线性排列（头部导航水平排列、侧边栏菜单垂直排列、卡片内部元素居中对齐），两者分工明确，让布局代码更清晰、易维护。

案例2：复杂商品列表（Grid 控结构，Flex 控细节）

需求：实现电商商品列表布局，每行显示不同数量的商品（移动端1个、平板2个、桌面3个），每个商品卡片包含图片、标题、价格、按钮，按钮需要右对齐，标题超出两行省略。

实现思路：

1. 用 Grid 的响应式前缀（sm:、lg:）实现不同屏幕下的商品数量控制；
2. 用 Flexbox 实现商品卡片内部的垂直布局和按钮右对齐；
3. 结合 Tailwind 的 line-clamp 实现标题多行省略。

代码实现：

<!-- 商品列表：Grid 响应式布局 -->
<div class="container mx-auto px-4 p-6">
  <h2 class="text-xl font-bold mb-6">热门商品</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- 商品卡片：Flex 垂直布局 -->
    <div class="bg-white rounded-lg border overflow-hidden flex flex-col h-full">
      <div class="h-48 overflow-hidden">
        <img src="https://picsum.photos/id/26/400/400" alt="商品1" class="w-full h-full object-cover hover:scale-105 transition-transform">
      </div>
      <div class="p-4 flex flex-col flex-grow">
        <h3 class="font-medium mb-2 line-clamp-2">
          2024新款夏季连衣裙 韩版宽松显瘦碎花长裙 气质温柔风女装
        </h3>
        <p class="text-primary font-bold mb-3">¥199.00</p>
        <div class="flex-grow flex items-end justify-end">
          <button class="bg-primary text-white px-3 py-1 rounded text-sm">
            加入购物车
          </button>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg border overflow-hidden flex flex-col h-full">
      <div class="h-48 overflow-hidden">
        <img src="https://picsum.photos/id/27/400/400" alt="商品2" class="w-full h-full object-cover hover:scale-105 transition-transform">
      
        <h3 class="font-medium mb-2 line-clamp-2">
          男士纯棉短袖T恤 夏季宽松百搭圆领上衣 休闲纯色打底衫
        </h3>
        <p class="text-primary font-bold mb-3">¥89.00</p>
        <div class="flex-grow flex items-end justify-end">
          <button class="bg-primary text-white px-3 py-1 rounded text-sm">
            加入购物车
          </button>
        </div>
      
        <h3 class="font-medium mb-2 line-clamp-2">
          儿童运动鞋 夏季透气网面跑鞋 男女童轻便软底休闲鞋
        </h3>
        <p class="text-primary font-bold mb-3">¥129.00</p>
        <div class="flex-grow flex items-end justify-end">
          <button class="bg-primary text-white px-3 py-1 rounded text-sm">
            加入购物车
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

代码说明：这里 Grid 解决了商品列表的二维网格排列和响应式适配问题，而 Flexbox 则解决了商品卡片内部的垂直分布（标题、价格、按钮的上下排列）和按钮右对齐的细节问题。通过 flex-grow 让按钮区域自动占据剩余空间，实现了按钮始终靠下对齐的效果，提升了布局的美观度。

四、协同布局的核心原则与避坑指南

1. 核心原则：分工明确

• Grid 负责「宏观布局」：页面整体结构、复杂的网格区块划分、元素的行/列定位；
• Flexbox 负责「微观布局」：区块内部元素的线性排列（水平/垂直）、元素的对齐方式、弹性伸缩。

2. 常见误区与避坑技巧

• 误区1：用 Grid 实现简单的线性布局—— 比如导航栏、按钮组，虽然能实现，但代码比 Flexbox 繁琐，没必要。
• 误区2：用 Flexbox 实现复杂的网格布局—— 比如多行多列且元素需要跨行列的布局，Flexbox 实现起来很麻烦，甚至需要额外计算宽度，不如 Grid 直接。
• 避坑技巧1：优先用 Grid 搭框架—— 拿到布局需求时，先判断是否需要二维布局，如果是，先用 Grid 定义好整体结构，再用 Flexbox 处理内部细节。
• 避坑技巧2：灵活运用响应式前缀—— Grid 和 Flexbox 都可以结合 Tailwind 的响应式前缀，实现不同屏幕下的布局切换，不用写大量媒体查询。
• 避坑技巧3：避免过度嵌套—— 布局层级越多，性能越差，可读性越低。合理划分区块，尽量用最少的层级实现需求。

五、总结

Grid 和 Flexbox 不是竞争关系，而是互补关系。Grid 擅长处理二维布局，解决「整体框架」问题；Flexbox 擅长处理一维布局，解决「内部细节」问题。两者协同使用，才能高效地构建出复杂、灵活、易维护的响应式布局。

我的实战经验：遇到布局需求时，先问自己两个问题：① 这个布局是一维还是二维？② 是整体框架还是局部细节？想清楚这两个问题，就能快速判断该用 Grid 还是 Flexbox，或者两者结合。

最后建议大家多动手实践，比如用 Grid + Flexbox 复刻一些知名网站的布局（比如电商商品列表、后台管理系统仪表盘），在实践中掌握两者的协同技巧，才能真正做到融会贯通！