Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?

Question

From the official documentation, I am only able to come up with something like this:


  1st col
  2nd col

But this gives me 2 columns with an equal width - how do I specify that the first column would be like 20% of the total width (I only need to place there a simple icon) and the rest of the width would be the second column (here would be a text)?

Thank you in advance.

user_10698741 · Answer

Set grid-cols-5 to the wrapper and col-span-4 to second column. It will cover 4/5 (80%)




  1st col
  2nd col

Another way with grid-flow-col




  1st col
  2nd col

user_184124 · Answer

You can define additional utilities by extending the theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns:
      {
        '20/80': '20% 80%',
        'fixed': '40px 260px',
      }
    }
  }
}

Updated for Tailwind CSS 3:

With the introduction of the JIT compiler and the ability to use arbitrary/dynamic values in some utilities, you can now do this without the config:

user_5198250 · Answer

You can use col-span like below

     // This will create 5 grids so 20% each
      
       // This will take 80% of space

Reference: https://tailwindcss.com/docs/grid-column#class-reference

Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?

3 Answers