Tailwind CSS 网格提供 3 行而不是 3 列，但仅适用于 grid-cols-6

Question

我想要里面有 1 行和 3 列。所以我在网格 div 中创建了 3 divs，它有一个 class 的“grid-cols-3”，但我得到了 3 个原始数据和 1 个列。

<div class="grid grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

然后我得到了

但是当我将“grid-col-3”更改为“grid-col-6”时，它起作用了！

    <div class="grid grid-cols-6">
      <div> Col 1 </div>
      <div> Col 2 </div>
      <div> Col 3 </div>
   </div>

然后我得到了

我是自学成才的，没有很好的导师。我知道如何使用像“网格模板”这样的 CSS 来做到这一点，但我正在使用 tailwind 来通过 Laravel 和 Livewire 进行更快的部署。

Answer 1

如果您在 Tailwind Play 中测试您的代码，您会发现它工作正常（正如预期的那样），因此可能有一些 CSS 覆盖了它class：grid-cols-3。你应该检查一下。

但是我在使用 Laravel Livewire 时遇到了类似的问题，我检查了内置的 css 文件，我注意到有这个 class定义：.md\:grid-cols-3 所以在我的例子中，结果是：

<div class="grid md:grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Tailwind CSS grid gives 3 rows instead of 3 cols but works with grid-cols-6 only