CODEWITHSUNDEEP
cssflexboxtailwind-csstailwind-css-2
chuysbz
chuysbz

Reputation: 1490

Tailwind: add gap to flex without breaking row

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

Upvotes: 25

Views: 32303

Answers (4)

Temani Afif
Temani Afif

Reputation: 272797

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>

Upvotes: 27

Nicolas Durant
Nicolas Durant

Reputation: 437

If you want to keep using flex and not grid, you can wrap your cards with half of the gap you wanted as padding and subtract it as margin from the wrapping flex row.

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

Upvotes: 7

Fabio Zanchi
Fabio Zanchi

Reputation: 945

You also can use the space between utility space-x-{amount} if you want to keep using flex instead of grid:

<div class="flex flex-wrap space-x-0 md:flex-nowrap md:space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

More details here

I've updated this answer to use flexbox. The key is adding the breaking points for flex-wrap and flex-nowrap.

Upvotes: 4

LuJaks
LuJaks

Reputation: 1179

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>

Upvotes: 12

Related Questions