Tailwind Grid设置较大gap-x时溢出父容器的解决方法咨询

问题原因 #

Tailwind的grid-cols-12默认等价于grid-template-columns: repeat(12, 1fr)，这里的1fr会优先保证网格项的最小内容宽度，再分配剩余空间。当gap-x的总宽度加上所有网格项的最小宽度之和超过父容器宽度时，整个网格就会溢出父容器。

解决方案 #

把grid-cols-12替换为grid-cols-[repeat(12,minmax(0,1fr))]，强制列宽可以收缩到0，这样网格会自动根据父容器宽度和gap计算每列的实际宽度，不会溢出。

修改后的代码：

<div style="width: 300px" class="bg-red-400">
  <div class="grid grid-cols-[repeat(12,minmax(0,1fr))] gap-x-8">
    <div class="col-span-6 bg-blue-500">
      A
    </div>
    <div class="col-span-6 bg-green-500">
      B
    </div>
  </div>

  <div class="bg-yellow-500">
    It should be only this wide
  </div>
</div>

补充说明 #

col-span-6本身是按比例分配列数，但如果列的最小宽度限制导致总宽度超了，比例分配就会失效。用minmax(0,1fr)打破这个最小宽度限制，让网格系统正确计算总宽度（父容器宽度 = 12列宽度总和 + gap总宽度），从而避免溢出。

内容的提问来源于stack exchange，提问作者Tien Do Nam