我可以使用 Tailwind CSS 实用程序类创建砌体布局吗？ [复制]

Question

我正在尝试使用 Tailwind CSS 实用程序类（不是纯 CSS）创建 Masonry 布局，但通过所有官方 Tailwind 文档，似乎框架已经提供了一种方法。

Bootstrap 5 允许您这样做，但需要 JavaScript 库。 https://getbootstrap.com/docs/5.0/examples/masonry/

有没有办法使用 Tailwind CSS 而不使用任何额外的 JavaScript 库？

Answer 1

我使用 TailwindCSS @layer 和 @variants 指令解决了这个问题。
以下代码在 LG 断点上提供了 3 列网格布局，在 MD 断点上变为 2 列，而在移动设备上只有 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 列。
https://blog.marclucraft.co.uk/masonry-layout-with-tailwindcss

Answer 2

现在看来只需要这样做就可以进行适当的砌体布局，而无需添加任何库：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

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

这篇文章的更多细节：https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

可以在此处找到当前状态：https://drafts.csswg.org/css-grid-3/

Wes Bos also do have a free CSS grid course 在其上，他仅使用 CSS 网格（没有 masonry 道具）模拟了这种行为。

---

编辑：砌体并不容易，因为它取决于您要寻找的确切内容，但即使 columns 在某些情况下也很有用！