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

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

<div class="grid grid-cols-2 gap-3">
  <div>1st col</div>
  <div>2nd col</div>
</div>

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.

csstailwind-css


Solution 1:[1]

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-cols-5 gap-3">
  <div class="bg-blue-100">1st col</div>
  <div class="bg-red-100 col-span-4">2nd col</div>
</div>

Another way with grid-flow-col

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-flow-col gap-3">
  <div class="bg-blue-100 col-span-1">1st col</div>
  <div class="bg-red-100 col-span-4">2nd col</div>
</div>

Solution 2:[2]

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',
      }
    }
  }
}

<div class="grid grid-cols-20/80 w-full h-64">
  <div class="bg-blue-500"></div>
  <div class="bg-red-500"></div>
</div>

<div class="grid grid-cols-fixed h-64">
  <div class="bg-blue-500"></div>
  <div class="bg-red-500"></div>
</div>

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:

<div class="grid grid-cols-[20%_80%] w-full h-64">

<div class="grid grid-cols-[40px_260px] w-full h-64">

Solution 3:[3]

You can use col-span like below

    <div class="grid grid-cols-5 gap-3"> // This will create 5 grids so 20% each
      <div class="some-class"></div>
      <div class="col-span-4"></div> // This will take 80% of space
    </div>

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

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
Solution 2
Solution 3

Related Questions