使用 tailwind css 的 Next.js 中的砖石墙未对齐

Question

我在 Next.js 14 中使用 tailwind CSS 创建了一个图像库。 问题是网格底部网格元素的描述移至下一列。

我尝试过的解决方案：

1. 我使用网格类

   grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3

   来解决这个问题，但图像之间存在我不想要的间隙。

电流输出

我的代码

<div className="mt-4 columns-1 md:columns-2 lg:columns-3 gap-x-8 ">
  {ProductsMockData.map((products) => { return (
  <div className=" group relative mb-4" key={products.id}>
    <div className=" w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75">
      <Image src={products.image} alt="Basic Tee in black." className="h-full w-full object-cover" unoptimized={true} width={500} height={500} />
    </div>
    <div className="mt-4 flex justify-between">
      <div>
        <h3 className="text-md text-primary">
          <Link href="#">
          <span aria-hidden="true" className="absolute inset-0"></span> {products.title}
          </Link>
        </h3>
        <p className="mt-1 text-sm text-secondary-foreground">
          {products.description}
        </p>
      </div>
      <p className="text-sm font-medium text-primary">
        {products.price}
      </p>
    </div>
  </div>
  ); })}
</div>

感谢帮助:)

Answer 1

好吧，在花了相当长的时间研究 tailwind css 文档之后，我找到了问题的解决方案。

我在

"break-inside-avoid"

中添加了类

<div className=" group relative mb-4" key={products.id}>

，这解决了我的问题。

实现产出

不再破坏底部的描述部分，希望这对某人有帮助。