Tailwind: add gap to flex without breaking row

Question

I have a simple flex div with many children. I want 3 elements on each row using tailwindcss.

Is there a way to accomplish this using just tailwindcss classes? I tried with gap-4 on my parent div and child elements with w-1/3, but it adds margin to the children elements, breaking the row after the second element:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-wrap gap-4 mb-6">
  <div class="w-1/3 shadow border rounded p-4">
    My element
  </div>
  <div class="w-1/3 shadow border rounded p-4">
    My element
  </div>
  <div class="w-1/3 shadow border rounded p-4">
    My element
  </div>
  <div class="w-1/3 shadow border rounded p-4">
    My element
  </div>
</div>

How can I add a gap between the child elements, breaking the line only after every third element (in short: I want a 3 column div)?

Answer 1

This is a grid job

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet" />
<div class="grid-cols-3 grid gap-4 mb-6">
  <div class="shadow border rounded p-4">
    My element
  </div>
  <div class="shadow border rounded p-4">
    My element
  </div>
  <div class="shadow border rounded p-4">
    My element
  </div>
  <div class="shadow border rounded p-4">
    My element
  </div>
</div>

Answer 2

You can customize the Tailwind CSS and add new class that calculates the basis including gaps.

https://tailwindcss.com/docs/flex-basis#using-custom-values

  theme: {
    extend: {
      flexBasis: {
        "1/3-gap-4": "calc(33.3% - (2/3 * 1rem))"
      }
    },
  },

and apply it with

<div class="flex flex-wrap gap-4">
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
        <div class="basis-1/3-gap-4">
            My element
        </div>
</div>