如何用Tailwind创建无需断点的响应式自动换行网格？

你的问题出在grid-flow-col这个类上——它会强制网格元素沿水平方向单行排列，不会自动换行，这就是所有元素挤在一行的原因。要实现不用断点的自动适配布局，你需要用auto-fit + minmax的组合来定义网格列。

修改后的代码 #

<div class="w-96 border-2 border-red-500">
  <div class="grid grid-cols-[repeat(auto-fit,minmax(80px,1fr))] gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

关键类说明 #

• grid-cols-[repeat(auto-fit,minmax(80px,1fr))]：
  • auto-fit：自动检测容器宽度，调整列的数量，空间不够时自动换行
  • minmax(80px,1fr)：每列最小宽度设为80px（和子元素的w-20对应），剩余空间按比例分配给各列
• 移除了grid-flow-col和auto-cols-max：默认的网格流是垂直方向（自动换行），不需要强制水平排列

这样调整后，当你缩小红色边框容器的宽度时，网格元素会自动换行，完全不需要依赖sm/md这类断点。

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