如何在 Tailwind 中创建具有间隙的等宽列网格？答案

【问题标题】：How to create an equal width columns grid with gap in Tailwind?如何在 Tailwind 中创建具有间隙的等宽列网格？
【发布时间】：2021-05-31 08:04:44
【问题描述】：

我第一次使用 css 网格时，在我的 3 列之间添加间隙时，我无法获得相等的内容。我不确定这是顺风问题（使用预定义的类）或抓地力或解决方案的来源（我缺少什么）。

这是一个说明性示例：

https://codepen.io/erkage/pen/VwmxeRG

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div class="grid grid-cols-3 space-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
  <div class="bg-blue-200 py-2">
    <label class="block">Label 1</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 2</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 3</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
</div>

HTML：

<div class="parent">
  <div class="child">this is larger than 2-3</div>
  <div class="child2">this is equal with 3rd</div>
  <div class="child2">this is equal with 2nd</div>
</div>

使用的 css 是（来自顺风）：

.parent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.child2 {
  margin-right: calc(0.75rem * 0);
  margin-left: calc(0.75rem * calc(1 - 0));
}

而且我知道主要问题来自那个孩子 2 和 3 有一个边距，而 1 没有，但是如果它存在的话，它正在寻找一个内置的解决方案（使用 css 网格）。由于设计情况，孩子 1 也不能有剩余边距。

【问题讨论】：

标签： css css-grid tailwind-css

【解决方案1】：

将space-x-3 替换为gap-x-3

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

<div class="grid grid-cols-3 gap-x-3 items-stretch mt-10 m-auto border border-gray-900" style="width:800px">
  <div class="bg-blue-200 py-2">
    <label class="block">Label 1</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="266px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 2</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
  <div class="bg-blue-200 py-2">
    <label class="block">Label 3</label>
    <input type="text" class="rounded-lg border border-gray-400 py-2 w-full" placeholder="254px">
  </div>
</div>

【讨论】：