我在使用 Tailwind 的网格布局类时注意到一些不规则之处。我做错了什么？

Question

在使用具有不同列网格的布局系统时，我注意到在使用分数（fr）时，列之间的间隙在某种程度上并不完全一致。我也尝试使用百分比，但随后出现了最后一些列溢出的问题。你知道我做错了什么吗？

在此输入图片描述

这是我对 Tailwind 类的标记：

<div class="p-5">
  <h2 class="mb-5 text-center text-2xl">Using fr</h2>
  <div class="mb-10 grid grid-cols-2 gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
  </div>

  <div class="mb-10 grid grid-cols-[1fr_1fr_1fr] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
    <div class="border border-emerald-300">3</div>
  </div>

  <div class="mb-10 grid grid-cols-[1fr_2fr] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
  </div>

  <div class="mb-10 grid grid-cols-[1fr_1fr_1fr_1fr] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
    <div class="border border-emerald-300">3</div>
    <div class="border border-emerald-300">4</div>
  </div>

  <h2 class="mb-5 text-center text-2xl">Using Percentage</h2>
  <div class="mb-10 grid grid-cols-[50%_50%] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
  </div>

  <div class="mb-10 grid grid-cols-[33.33%_33.33%_33.33%] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
    <div class="border border-emerald-300">3</div>
  </div>

  <div class="mb-10 grid grid-cols-[33.33%_66.66%] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
  </div>

  <div class="mb-10 grid grid-cols-[66.66%_33.33%] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
  </div>

  <div class="mb-10 grid grid-cols-[25%_25%_25%_25%] gap-10 border border-emerald-300">
    <div class="border border-emerald-300">1</div>
    <div class="border border-emerald-300">2</div>
    <div class="border border-emerald-300">3</div>
    <div class="border border-emerald-300">4</div>
  </div>
</div>

我希望结果是一个规则的网格，间隙完全对齐。我没想到会有任何溢出的元素。

Answer 1

诊断

网格的

fr

版本中元素不对齐的原因在于数学。让我们更仔细地检查第二行和第三行。

第二排

对于

1000px

的容器：

column +  gap + column +  gap + column = 1000px
  1fr  + 40px +   1fr  + 40px +   1fr  = 1000px

消除间隙：

1fr + 1fr + 1fr = 920px
            3fr = 920px
             fr = 306.666…px

因此，每一列都是

306.666…px

。

第三排

对于

1000px

的容器：

column +  gap + column = 1000px
  1fr  + 40px +   2fr  = 1000px

消除间隙：

1fr + 2fr = 960px
      3fr = 960px
       fr = 320px

因此，每个

fr

都是

320px

。所以左列是

320px

，右列是

640px

。

结果

因此，比较两个

fr

的长度，

306.66…px

≠

320px

，因此会出现对齐差异。

解决方法

考虑使用相同的网格列模板并将元素跨越多个网格列轨道：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="p-5">
  <h2 class="mb-5 text-center text-2xl">Using fr</h2>
  <div class="mb-10 grid grid-cols-12 gap-10 border border-emerald-300">
    <div class="border border-emerald-300 col-span-6">1</div>
    <div class="border border-emerald-300 col-span-6">2</div>
  </div>

  <div class="mb-10 grid grid-cols-12 gap-10 border border-emerald-300">
    <div class="border border-emerald-300 col-span-4">1</div>
    <div class="border border-emerald-300 col-span-4">2</div>
    <div class="border border-emerald-300 col-span-4">3</div>
  </div>

  <div class="mb-10 grid grid-cols-12 gap-10 border border-emerald-300">
    <div class="border border-emerald-300 col-span-4">1</div>
    <div class="border border-emerald-300 col-span-8">2</div>
  </div>

  <div class="mb-10 grid grid-cols-12 gap-10 border border-emerald-300">
    <div class="border border-emerald-300 col-span-3">1</div>
    <div class="border border-emerald-300 col-span-3">2</div>
    <div class="border border-emerald-300 col-span-3">3</div>
    <div class="border border-emerald-300 col-span-3">4</div>
  </div>
</div>