Html 顺风(CSS网格)每个网格元素的大小相同

Html 顺风(CSS网格)每个网格元素的大小相同,html,css,css-grid,tailwind-css,Html,Css,Css Grid,Tailwind Css,我想用一些输入字段写一个公式。我使用顺风2号和新的电网系统 我想要一个3列的公式(grid-cols-3) 在第二排,我有一个col-span-2,一行超过2列,因为我想在那里放置一个更大的文本区域。 每次输入的标签大小为w-1/2。当我有一个colspan 2时,我想我可以简单地将宽度从标签更改为w-1/4,将文本框更改为w-3/4,这样标签的大小必须与所有其他标签的大小相同,只有输入的大小必须更大。 我做错了什么?w-1/4的标签比另一个大2个像素 这里有一个指向代码示例的链接 信息箱 一

我想用一些输入字段写一个公式。我使用顺风2号和新的电网系统

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

这里有一个指向代码示例的链接


信息箱
一个
两个
树
四
五
`
      <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>
`