Tailwind 网格间隙溢出父级

Question

我正在使用 Tailwind 来设计我的网站。 一旦我添加

gap-x-7

或更大，网格就会变得比父网格更大。对于

gap-x-6

或更小尺寸来说效果很好。我怎样才能解决这个问题？

col-span-6

不应该总是计算剩余宽度吗？

<div style="width: 300px" class="bg-red-400">
  <div class="grid grid-cols-12 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>

Answer 1

经过一番尝试后，我发现每列周围都会添加间隙，即使它们只是虚拟的。

gap-x-7

或更大将导致每列理论上为负。

为了解决这个问题，我们需要将网格分成更少的部分。 在下面的代码中，我将

grid-cols-12

替换为

grid-cols-2

。

<div style="width: 300px" class="bg-red-400">
  <div class="grid grid-cols-2 gap-x-8">
    <div class="col-span-1 bg-blue-500">
      A
    </div>
    <div class="col-span-1 bg-green-500">
      B
    </div>
  </div>

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