Tailwind grid_template_columns

user_15214676 0
Viewed 11371

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.

tailwind-css
5 Answers

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>
user_19939560

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>
user_53261910

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.

user_79716290

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?

user_58563180

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>
user_112224180
Related