如何使用 React 和 Tailwind 设计响应式图片库的样式？

Question

我目前正在尝试为我拍摄的照片建立一个响应式的作品集网站。我的目标是，根据当前屏幕宽度，显示特定数量的带图像的列。当屏幕变小时，列应该越来越少，直到最小屏幕尺寸只有一列。 这一切都已经有效，但是如下图所示，当图像具有不同的宽高比时会出现空白。我想实现的是，下一张图像只是填充其上下相邻图像之间的空间，以便垂直方向上所有图像之间的空间分布均匀。

我已经搜索了一个解决方案，发现 Tailwind 在使用列类时已经提供了类似的东西，其中可以设置特定数量的列，如下图所示，不幸的是，默认情况下它没有响应，我无法将其转换为响应式布局。

这是 Gallery 组件的当前代码：

import Card from "./Card/card";

export default function Gallery (){
    return (                
            <section className="overflow-hidden">
                <div className="container flex justify-center min-w-full px-5 py-2 lg:px-32 lg:pt-12">
                    <div className="flex flex-wrap md:-m-2 2xl:w-5/6">
                        <Card imgLink = {"./images/img.jpg"} />
                        <Card imgLink = {"./images/img2.jpg"} />
                        <Card imgLink = {"./images/img.jpg"} />
                        <Card imgLink = {"./images/img2.jpg"} />
                        <Card imgLink = {"./images/img.jpg"} />
                        <Card imgLink = {"./images/img2.jpg"} />
                    </div>
                </div>
            </section>
        </div>
    )
}

Card组件的代码：

import Link from "next/link";

export default function Card ({ imgLink }){
    return (
        <div className="flex xl:w-1/4 lg:w-1/3 md:w-1/2 flex-wrap box-border h-max">
            <Link href="/images/1" className="w-full p-1 relative block group">
                <div className="w-full p-1 md:p-2 relative block group">
                    <img
                        alt="gallery"
                        className="block h-full w-full rounded-lg object-cover object-center group-hover:opacity-50"
                        src={imgLink}
                        title="Image"    
                    />
                </div>
            </Link>
        </div>
    )
}

我正在使用 NextJS (React) 和 Tailwind CSS