Equal-width columns in CSS with flexbox and Tailwind

Álvaro Franz 0
Viewed 45

I want to have a flexbox layout where three columns have the same width.

I have to use Tailwind in this case, but it doesn't change the CSS theory... which, as far as I know, says I need to give the three columns the same basis, and then let them grow freely (all of them will grow the same proportion because they have the same basis).

But it's not working. One of the column gets bigger and I don't know why.

Note: I added a border just to make it visually clear, but I don't need that.

.just-a-border {
border: 2px dotted purple;
}
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>

Any idea to make it work?

tailwind-css css
3 Answers

It appears you are using Tailwind classes from version 3 while you are using version 2.2.19.

I added the following classes to your css and it now gives even columns.

.grow {
  flex-grow: 1;
}

.basis-1 {
  flex-basis: 0.25rem;
}

Also see the Play demo which uses your code, unchanged, and works as you would have expected.

https://play.tailwindcss.com/VjbHZcTiVH

.just-a-border {
border: 2px dotted purple;
}

.grow {
  flex-grow: 1;
}

.basis-1 {
  flex-basis: 0.25rem;
}
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>

stickyuser0

You can use grid for that, instead of flex. Defining the number of columns with grid-cols-3 will create three columns of equal width and height.

See playground example and tailwind docs.

<div class="grid w-full grid-cols-3 flex-row justify-center gap-5 py-12">
  <div class="rounded-lg border border-slate-300 p-6 text-center">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="rounded-lg border border-slate-300 p-6 text-center">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="rounded-lg border border-slate-300 p-6 text-center">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>
user2Gab10

You used the classes from Tailwind CSS v3. So, if you upgrade your Tailwind CSS version to v3, your codes will be just working good.

If you want to keep the current version which is v2, you just need to update a few of class names in your current codes like below. basis-1 to flex-1, grow to flex-grow

<style>
  .just-a-border {
    border: 2px dotted purple;
  }
</style>

<div class="flex flex-row flex-nowrap items-center gap-5 justify-center py-12">
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 flex-grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>
Kevin Su0
Related