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

Question

我想在里面有 1 行和 3 列。所以我在一个网格 div 中创建了 3 个 div，它有一个“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>

然后我得到了

我是自学成才的，没有什么好的导师。我知道如何使用像“grid-template”这样的 CSS 来做到这一点，但我使用 Tailwind 来更快地部署 Laravel 和 Livewire。

Answer 1

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

然而，我在Laravel Livewire上遇到了类似的问题，我检查了内置的 css 文件，我注意到定义了这个类：.md\:grid-cols-3所以在我的例子中，这解决了：

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