Tailwind (CSS Grid) Same sizes for every Grid Element

Question

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

Mostafa Ahangarha · Accepted Answer · 2021-07-19 10:09:20Z

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>

Collectives™ on Stack Overflow

Tailwind (CSS Grid) Same sizes for every Grid Element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related