Tailwind CSS - 如何制作一个包含两列的网格，其中第一列的宽度为 20%，第二列的宽度为 80%？答案

【问题标题】：Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?Tailwind CSS - 如何制作一个包含两列的网格，其中第一列的宽度为 20%，第二列的宽度为 80%？
【发布时间】：2021-07-18 09:25:11
【问题描述】：

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

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

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

提前谢谢你。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

将grid-cols-5 设置为包装器，将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>

【讨论】：

谢谢你，@dogukan。我只是想知道 - 我以 20-80% 的宽度比为例，如果我需要一列像 40px 而另一列像 260px 怎么办？我这里还能用网格系统吗？
您需要使用tailwind 即时编译器才能创建自定义复杂网格系统tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

【解决方案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

【讨论】：

@doğukan 是的，你刚刚在我写代码的一分钟前添加了答案。它并不完全相同。你可以检查一下。

【解决方案3】：

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

【讨论】：