Next.js 14 + Tailwind CSS图片画廊：网格描述跨列错位问题求助

在Next.js 14中使用Tailwind CSS创建图片画廊时，遇到两个问题：

• 网格元素底部的描述内容会错位到下一列
• 尝试使用grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3这类Grid布局类时，图片之间出现不想要的间隙

当前效果：

当前代码：

<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>

解决方案 #

解决描述内容错位问题 #

你当前使用的columns多列布局会自动拆分内容到下一列，导致描述被截断错位。给每个卡片元素添加break-inside-avoid类，阻止内容被拆分：

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

解决Grid布局的间隙问题 #

如果想用Grid布局替代多列布局，调整配置如下：

1. 用grid替代columns布局
2. 添加gap-y-8控制垂直间隙，配合原有的gap-x-8控制水平间隙
3. 确保Grid项自动拉伸对齐

修改后的Grid版本代码：

<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-8">
  {ProductsMockData.map((products) => { return (
  <div className="group relative" 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>

额外优化建议 #

• 如果图片高度不一致，给Image容器添加固定比例类（比如aspect-square），避免卡片高度差异过大
• 可以给Grid布局添加auto-rows-fr，让每行高度自动适配最高的卡片

内容的提问来源于stack exchange，提问作者Bhavesh Kumar Sharma