将grid-cols-5设置为wrapper，将col-span-4设置为第二列，它将覆盖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>

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>

您可以通过扩展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>

针对Tailwind CSS 3进行了更新：
随着JIT编译器的引入，以及在某些实用程序中使用任意/动态值的能力，您现在可以在不使用config的情况下执行此操作：
一个二个一个一个

您可以像下面这样使用col-span

<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>

参考：www.example.comhttps://tailwindcss.com/docs/grid-column#class-reference

对于@horuskol针对列模板的解决方案，%不考虑容器维度，因此如果使用gap，则网格将溢出其容器
如果您使用fr而不是%，则网格内容将灵活地设置样式，因此不会溢出容器
例如
grid-cols-[1fr_2fr]在33% / 66%时提供2列
grid-cols-[1fr_2fr_1fr]在25% / 50% / 25%时提供3列

简单

<div class="flex flex-wrap">
  <div class="w-1/5"> 20% </div>
  <div class="w-4/5"> 80% </div>
</div>

https://v1.tailwindcss.com/components/flexbox-grids