做 Tailwind 网格的正确方法？

Question

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

方法一：

<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 种方法之间的区别以及哪种方法适用于哪些应用程序吗？

Answer 1

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

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

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

第一个例子：

flex class 将导致 div 元素成为 flex 容器.

flex-wrap 将控制弹性项目的包装方式。

-mx-1 是一个 margin 属性，它将控制元素的边距，它正好等于：

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

在第二个 div 中，my-1 也是一个边距属性，它正好等于：

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

px-1 是一个 padding 属性，它将控制元素的填充，它恰好等于：

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

w-1/2是一个宽度属性，它会设置元素的宽度，这里正好等于：

width: 50%;

第二个例子：

grid class 将导致 div 元素成为 网格布局 。

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

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

gap-1 将控制 grid 和 flexbox 项目之间的间距，它们完全相等：

gap: 0.25rem;

第三个例子：

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

grid-flow-col 是网格自动流属性，它将控制网格中元素的自动放置方式。

col-span-1 将控制元素在网格列中的大小和放置方式，它们完全相等：

grid-column: span 1 / span 1;

做 Tailwind 网格的正确方法？

Correct way to do Tailwind grids?

html

css

css-grid

tailwind-css

第一个例子：

第二个例子：

第三个例子：