34

How can we set individual column width in Tailwind?

For example in vanilla CSS I would

.grid-container {
  display: grid;
  grid-template-columns: 20% 80%;
}
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

But, in Tailwind if you apply width to the columns, it breaks the grid.

6 Answers 6

55

There is a way to set arbitrary values for columns, I know this question is old but I thought I would share. I'm new to tailwinds myself but I thought maybe someone else might find this helpful:

<div class="grid grid-cols-[20%_80%]">

This method also works for setting fixed widths:

<div class="grid grid-cols-[200px_auto]">

In this example the first column will have a fixed width of 200px and the other column would size in auto.

1
  • 2
    @Charlotte Wells this should be the accepted answer as the accepted one is a mental model workaround.
    – eliastouil
    Commented Sep 20, 2023 at 17:18
39

it's fairly simple. In grid CSS you can tell each element of the grid in which column or row it should start (See grid-column-start) or end (see grid-column-end) and even how many columns it should span.

With tailwind this is very simple (See Grid column) col-start-x col-end-x col-span-x

With this said, in your case it would be (assuming a 5 column grid)

<div class="grid-container grid grid-cols-5">
  <div class="item1 col-span-1">1</div>
  <div class="item2 col-span-4">2</div>
</div>
8

To set column width, you either use Grid Column Start / End or simple straight forward Width

working demo on tailwind play

<div class="grid grid-cols-10">
  <div class="col-span-2 bg-purple-200">1</div>
  <div class="col-span-8 bg-purple-300">2</div>
</div>
<div class="flex">
  <div class="bg-indigo-200 w-1/5">1</div>
  <div class="bg-indigo-300 w-4/5">2</div>
</div>
1

You can easily set Arbitrary values using brackets: grid-cols-[20%,80%], the same as any other combinations: grid-cols-[1fr,1.4fr].

Thanks sbaildon for suggestion.

-1

Basically, what tailwindcss does is a repeat(n, 1fr), so thats why our friends in other comments tell you to make a 10 grid and then make colspans.

I found my self in that situation many times to and, when I need only 2 columns with, in your case 80% 20%, I do it in the <style jsx>. In terms of responsiveness is going to be much, much easier.

Maybe in the future with tailwind JIT we could make this: Tailwind grid-template-columns

But for now we can't, maybe we could ask them, would you join?

1
-2

This is working for mine

<div class="grid grid-cols-6 gap-4">
    <div class="col-start-2 col-span-4">01</div>
    <div class="col-start-1 col-end-3">02</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.