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

Posted 2023-03-07

【中文标题】Tailwind CSS 网格提供 3 行而不是 3 列，但仅适用于 grid-cols-6

【英文标题】：Tailwind CSS grid gives 3 rows instead of 3 cols but works with grid-cols-6 only

【发布时间】：2021-09-29 09:05:24

【问题描述】：

我想在里面有 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 的部署。

【问题讨论】：

您的第一个示例在 Tailwind Play 中运行良好，因此您的布局会出现其他问题play.tailwindcss.com/lNVMhy4i6Y

【参考方案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>

【讨论】：

谢谢 Gustavo，我注意到在 Livewire 中没有正确加载顺风。我重新安装了tailwind，现在它可以工作了！