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

Question

我第一次使用 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 是(来自 tailwind):

.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));
}

而且我知道主要问题来自 child 2 和 3 有边距，而 1 没有，但正在寻找内置解决方案(使用 css 网格)(如果存在)。由于设计情况， child 1 也不能有 margin-left。

Answer 1

用gap-x-3替换space-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>