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

Issue

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.

Solution

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>

Answered By - doğukan