如何用Tailwind实现Grid组件横向滚动，最多显示3张卡片？

你当前使用grid grid-cols-3会强制将元素放入3列网格布局，多余元素自动换行，这是网格布局的二维特性导致的，无法触发横向滚动。要实现最多显示3张卡片、超出横向滚动的效果，需要改用flex布局，具体修改如下：

修复后的代码 #

<div class="m-10 w-96 border-2">
  <div class="flex w-full gap-3 overflow-x-auto">
    <button class="flex-shrink-0 w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-shrink-0 w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-shrink-0 w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
    <button class="flex-shrink-0 w-1/3 flex flex-col gap-1 rounded-xl bg-blue-300 p-3 shadow-md">Button</button>
  </div>
</div>

关键修改说明 #

• 替换grid grid-cols-3为flex：使用一维的flex布局实现横向排列，配合overflow-x-auto触发横向滚动。
• 添加flex-shrink-0：防止卡片在容器空间不足时被压缩，保证每张卡片宽度稳定。
• 设置w-1/3：让每张卡片占据容器宽度的1/3，刚好在容器内显示3张卡片，超出部分自然触发滚动。

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