Html 我可以使用Tailwind CSS实用程序类创建砖石布局吗？

我试图使用Tailwind CSS实用程序类（不是普通的CSS）创建一个砖石布局，但是通过查看所有正式的Tailwind文档，似乎没有一种方法可以完成框架已经提供的工作

Bootstrap5允许您这样做，但需要JavaScript库。

---

有没有一种方法可以在不使用任何额外的JavaScript库的情况下使用Tailwind CSS来实现这一点？

现在看来，在不需要添加任何库的情况下，只有这样做才能实现正确的砌石布局：

.container{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：砌体；
}

因此，您可能可以用很少的网格值扩展Tailwind的功能

有关本文的更多详细信息：

可在以下位置找到此项的当前状态：

韦斯·博斯（Wes Bos）在其上，他只使用CSS网格模拟这种行为（无

Mashine

prop）

---

---

编辑：砌石并不容易，因为它取决于你到底在寻找什么，但在某些情况下甚至是有用的

我使用TailwindCSS@layer和@variants指令解决了这个问题。
下面的代码在LG断点上提供了一个3列的网格布局，在MD断点上变成2列，在mobile上变成1列

将此文件添加到您的SCSS文件：

@layer utilities {
    @variants responsive {
        .masonry-3-col {
            column-count: 3;
            column-gap: 1em;
        }
        .masonry-2-col {
            column-count: 2;
            column-gap: 1em;
        }
        .break-inside {
            break-inside: avoid;
        }
    }
}

以及HTML：

<div class="md:masonry-2-col lg:masonry-3-col box-border mx-auto before:box-inherit after:box-inherit">
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
</div>

很长的内容

很长的内容

很长的内容

很长的内容

很长的内容

我的解决方案是我在这篇漂亮的文章中找到的答案的演变，它没有在页面调整上提供开关1-2-3列。

---

谢谢您的回答！非常有趣的方法。我还发现了另一个使用css的策略，它有点不同，我现在正在研究它。稍后我会在这里分享。我很高兴看到这是什么！：3顺便说一句，我已经编辑了我的答案，加入了

列

，这是另一个可能有用的整洁的CSS属性。这篇文章是。你下面提供的使用Tailwind的解决方案似乎不是Tailwind独有的，而是使用带有自定义mixin的通用CSS类，这样你就可以说你在“使用Tailwind”。我投票再次结束这篇文章，作为适当问题的副本。如果您认为其他人可能会发现定制的Tailwind mixin很有用，那么可以在规范目标上提供该解决方案。