做顺风网格的正确方法？答案

【问题标题】：Correct way to do Tailwind grids?做顺风网格的正确方法？
【发布时间】：2021-12-06 20:46:23
【问题描述】：

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

方法一：

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

【问题讨论】：

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

标签： html css css-grid tailwind-css

【解决方案1】：

让我们讨论每个示例。如 cmets 中所述，没有办法创建“完美”网格，也没有办法创建“最佳”网格。一切都取决于您要创建的内容。

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

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

第一个例子：

flex 类将使 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 类将使 div 元素成为网格布局。

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

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

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

gap: 0.25rem;

第三个例子：

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

grid-flow-col 是一个 Grid Auto Flow 属性，它将控制如何自动放置网格中的元素。

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

grid-column: span 1 / span 1;

【讨论】：