正确的Tailwind网格使用方法是什么？

Question

我刚开始使用Tailwind，对于如何正确使用网格/行和列有些困惑。以下是我看到的不同方法...

方法1：

<div class="flex flex-wrap -mx-1">
  <div class="my-1 px-1 w-1/2">
    <!-- Column Content -->
  </div>
  <div class="my-1 px-1 w-1/2">
    <!-- Column Content -->
  </div>
</div>

方法二：

<div class="grid grid-cols-2 gap-1">
  <div>
    <!-- Column Content -->
  </div>
  <div>
    <!-- Column Content -->
  </div>
</div>

方法三：

<div class="grid grid-flow-col gap-1">
  <div class="col-span-1">
    <!-- Column Content -->
  </div>
  <div class="col-span-1">
    <!-- Column Content -->
  </div>
</div>

有人能向我解释一下这3种方法之间的区别，以及哪一种是适用于什么应用程序的正确方法吗？

- jac

---

欢迎来到 Stack Overflow！这个问题会得到很多不同的意见 - 因为没有“正确”的用法。主要区别在于第一个例子使用了 flexbox 模型，而第二个和第三个例子则使用了 CSS Grid。对于所有子类，您可以查看 Tailwind 文档以了解它们的作用。 - disinfor

Answer 1

让我们讨论每个例子。如评论中所述，没有创建“完美”网格的方法，也没有创建“最佳”网格的方法。一切都取决于你要创建什么。

你提到的第一个示例是使用Flexbox构建的。

第二个和第三个示例是使用Grid构建的。

第一个示例： flex类将导致

元素成为flex容器。 flex-wrap将控制flex项目的换行方式。 -mx-1是一个margin属性，它将控制元素的边距，其中它恰好相等：

margin-left: -0.25rem;
margin-right: -0.25rem;

在第二个 div 中，my-1 也是一个 margin 属性，它的值恰好相等：

margin-top: 0.25rem;
margin-bottom: 0.25rem;

px-1是一个填充属性，它将控制元素的填充，使其完全相等：

padding-left: 0.25rem;
padding-right: 0.25rem;

w-1/2是一个宽度属性，可以设置元素的宽度，使其恰好相等：

width: 50%;

第二个例子：

grid 类将使 div 元素成为一个 网格布局。

grid-cols-2 将指定网格布局中的列数，使它们完全相等：

grid-template-columns: repeat(2, minmax(0, 1fr));

gap-1将控制网格和Flexbox项目之间的间距，其中它完全相等:

gap: 0.25rem;

第三个例子：

第三个例子与第二个例子有些相似，但我会解释上面未提及的其他类。

grid-flow-col 是一个Grid自动流属性，它将控制网格中元素的自动排列。

col-span-1 将控制元素在网格列中的大小和位置，其中大小完全相等：

grid-column: span 1 / span 1;

- Kevin M. Mansour