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

Question

我第一次使用 css 网格，我在添加间距时遇到了 3 列内容相等的问题。我不确定这是顺风问题（使用预定义的类）或抓地力或解决方案的来源（我所缺少的）。

这是一个说明性的例子：

<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

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

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

How to create an equal width columns grid with gap in Tailwind?

css

css-grid

tailwind-css