Tailwind CSS - 如何制作具有两列的网格，其中第一列的宽度为 20%，第二列的宽度为 80%？

Question

从官方文档中，我只能想出这样的东西：

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

但这给了我 2 列宽度相等 - 我如何指定第一列将是总宽度的 20%（我只需要在那里放置一个简单的图标），其余的宽度将是第二列（这里会有一段文字）？

先感谢您。

Answer 1

您可以通过扩展主题来定义其他实用程序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 编译器的引入以及在某些实用程序中使用任意/动态值的能力，您现在无需配置即可执行此操作：

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

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

Answer 2

你可以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>

参考： https: //tailwindcss.com/docs/grid-column#class-reference

Answer 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

Answer 4

设置grid-cols-5为包装器和col-span-4第二列。它将覆盖5/4 (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>