html - 我可以使用 Tailwind CSS 实用程序类创建 Masonry 布局吗？

Question

这个问题在这里已经有了答案:





CSS-only masonry layout

(3 个回答)



Make grid container fill columns not rows

(5 个回答)


7 个月前关闭。




我正在尝试使用 Tailwind CSS 实用程序类(不是普通 CSS)创建一个 Masonry 布局，但是通过所有的官方 Tailwind 文档，似乎框架已经提供了没有办法做到这一点。
Bootstrap 5 允许您这样做，但需要 JavaScript 库。
https://getbootstrap.com/docs/5.0/examples/masonry/
有没有办法在不使用任何额外的 JavaScript 库的情况下使用 Tailwind CSS 做到这一点？

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>

我的解决方案是我在这篇不错的文章中找到的答案的演变，该文章没有在页面调整大小时提供 switch 1-2-3 列。
https://blog.marclucraft.co.uk/masonry-layout-with-tailwindcss