'Tailwind grid_template_columns

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

Solution 1:^[1]

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>

Solution 2:^[2]

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?

Solution 3:^[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Digvijay
Solution 2	Jose E. Saura
Solution 3	raqibnur

'Tailwind grid_template_columns

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]