Tailwind grid_template_columns

Question

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.

Answer 1

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>

Answer 2

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>