Tailwind (CSS Grid) Same sizes for every Grid Element

user_4549553 0
Viewed 1915

I want to write a Formular with some input fields. I use Tailwind 2 and the new Grid System.

I want to have a 3 Column Formular (grid-cols-3) On the second row I have a col-span-2 to have a row over 2 Colums because I want place a bigger textarea there. The labels an input sizes a dfined with w-1/2 every time. When I have a colspan 2 I thought I have simple to change the width from the label to w-1/4 and the textbox to w-3/4 so the label must have the same size than all other only the input must have a bigger size. What am I doing wrong? The label from the w-1/4 is 2 pixel bigger than the other one.

Here I have a link to the code example. 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>
`
css-grid tailwind-css css html
1 Answers

Of course the width wouldn't remain the same. When you combine two grid, the gap between gets included in the new bigger section. therefor the width of this section would be twice of the smaller ones plus the gap between them. As the result, the width of label would become bigger than the original ones.

Maybe something like this would work better for you:

<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>

enter image description here

user_58265260
Related