Question 44039 in Html Question posted in
Some basic documentation can be found here.

Tailwind – Gap Messing Up Div Inside Div Width – Html

I’m quite new to Tailwind and I need to make 2 rows of divs:

Row 1 needs 4 divs of 1/4 width each
Row 2 needs 2 divs, 1 of 3/4 and another with 1/4 width, the bigger one will be divided into 3 divs of 1/3

Everything works perfectly until the gaps are applied, then the second row divs get or smaller or bigger than they should be (see example below)

I’d appreciate any help or suggestions on this matter 😀

    <div class="flex mt-1 gap-2 w-4/4">
        <div class="w-1/4 bg-red-400 h-12"></div>
        <div class="w-1/4 bg-red-500 h-12"></div>
        <div class="w-1/4 bg-red-600 h-12"></div>
        <div class="w-1/4 bg-red-700 h-12"></div>
    </div>
    <div class="flex mt-1 gap-2 w-4/4">
        <div class="flex gap-2 w-3/4">
            <div class="w-1/3 bg-blue-400 h-12"></div>
            <div class="w-1/3 bg-blue-500 h-12"></div>
            <div class="w-1/3 bg-blue-600 h-12"></div>
        </div>
        <div class="w-1/4 bg-blue-700 h-12"></div>
    </div>

    <div class="flex mt-1 w-4/4">
        <div class="w-1/4 bg-red-400 h-12"></div>
        <div class="w-1/4 bg-red-500 h-12"></div>
        <div class="w-1/4 bg-red-600 h-12"></div>
        <div class="w-1/4 bg-red-700 h-12"></div>
    </div>
    <div class="flex mt-1w-4/4">
        <div class="flex w-3/4">
            <div class="w-1/3 bg-blue-400 h-12"></div>
            <div class="w-1/3 bg-blue-500 h-12"></div>
            <div class="w-1/3 bg-blue-600 h-12"></div>
        </div>
        <div class="w-1/4 bg-blue-700 h-12"></div>
    </div>

I was expecting to get both row’s divs with the same width so they couldn’t be differentiated apart

Tags:

2

Answers


  1. 0

    Flex will shrink items by default, you need to add flex-shrink-0

    https://play.tailwindcss.com/y5ccT4t52L

    -Edit-

    Consider using grid for this type of layout, flexbox with fixed and relative width has a lot of quirks that you need to consider. grid you can just use fr units and you won’t have these issues.

    Login or Signup to reply.
  2. 0

    gap gives spaces all around the children, and since you have some of the div’s children also with with gaps this is why you get differences. Most likely if you use space-x-2 & space-y-2 will solve your problem

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search