Tailwind (CSS Grid) 每个网格元素的大小相同

Posted 2023-03-06

【中文标题】Tailwind (CSS Grid) 每个网格元素的大小相同

【英文标题】：Tailwind (CSS Grid) Same sizes for every Grid Element

【发布时间】：2021-03-05 00:56:06

【问题描述】：

我想编写一个带有一些输入字段的公式。我使用 Tailwind 2 和新的网格系统。

我想要一个 3 列公式 (grid-cols-3) 在第二行我有一个 col-span-2 有超过 2 列的行，因为我想在那里放置一个更大的文本区域。 输入的标签每次都用 w-1/2 定义。当我有一个 colspan 2 时，我认为我可以简单地将标签的宽度更改为 w-1/4，将文本框更改为 w-3/4，因此标签的大小必须与其他所有标签的大小相同，只有输入必须有更大的尺寸。 我究竟做错了什么？ w-1/4 的标签比另一个大 2 个像素。

这里有一个代码示例的链接。 https://play.tailwindcss.com/IqYsmfxpwJ

      <div class="">
        <h1>InfoBox</h1>
        <div class="grid grid-cols-3 gap-2">
          <div class="">
            <lable class="inline-block w-1/2">One</lable><input class="w-1/2 border">
          </div>
          <div class="">
            <lable class="inline-block w-1/2">Two</lable><input class="w-1/2 border">
          </div>
          <div class="">
            <lable class="inline-block w-1/2">Tree</lable><input class="w-1/2 border">
          </div>
          <div class="col-span-2">
            <lable class="inline-block w-1/4">Four</lable><input class="w-3/4 border">
          </div>
          <div class="">
            <lable class="inline-block w-1/2">Five</lable><input class="w-1/2 border">
          </div>
        </div>
      </div>
`

【参考方案1】：

当然宽度不会保持不变。当您合并两个网格时，之间的差距将包含在新的更大部分中。因此，这部分的宽度将是较小部分的两倍加上它们之间的间隙。结果标签的宽度会比原来的大。

也许这样的东西更适合你：

<div class="">
  <h1>InfoBox</h1>
  <div class="grid grid-cols-3 gap-2">
    <div class="flex">
      <lable class="inline-block w-20 flex-none">One</lable><input class="w-full border">
    </div>
    <div class="flex">
      <lable class="inline-block w-20 flex-none">Two</lable><input class="w-full border">
    </div>
    <div class="flex">
      <lable class="inline-block w-20 flex-none">Tree</lable><input class="w-full border">
    </div>
    <div class="flex col-span-2">
      <lable class="inline-block w-20 flex-none">Four</lable><input class="w-full border">
    </div>
    <div class="flex">
      <lable class="inline-block w-20 flex-none">Five</lable><input class="w-full border">
    </div>
  </div>
</div>