我正在使用 Tailwind CSS 和 React 来构建一个应用程序，在其中一个视图中我有一个卡片网格。目前它看起来像这样：
如您所见，当我缩小窗口时，卡片会挤入其中。我想确保卡片大小（宽度和高度）始终保持不变，并且如果随着窗口变小，卡片数量无法容纳在一行中，它只会移动到下一行。
类似于（用 MS 油漆制成）：
即使屏幕变小，卡片的尺寸也保持固定（相同的宽高比）。
这是我的代码当前的样子：
网格：
<div>
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-4 md:grid-cols-6 md:gap-4 lg:grid-cols-8 lg:gap-4">
{props.trips.map((trip: TTrip) => (
<TripCard trip={trip} href={currentPath + trip.id} />
))}
</ul>
</div>
卡片：
<li
key={props.trip.id}
className="card card-compact shadow-xl col-span-1 w-128 h-fit bg-gray-100 hover:bg-base-200"
>
<div className="relative w-128 h-32">
<Image src="https://placeimg.com/500/225/arch" layout="fill" objectFit="cover" />
</div>
<div className="card-body">
<h2 className="card-title">{props.trip.name}</h2>
<h2>Time - Time</h2>
</div>
</li>
知道如何使用 tailwind-css 进行设置吗？
我知道您想使用 Grid 进行设置，但不幸的是，它不是适合这项工作的工具。 Flexbox 最适合您的需求。 这是一个 tailwind 游乐场，显示您想要的输出。我链接的 Playground 不使用 NextJS，就像您的示例中那样。因此，我修改了一些内容，例如图像，因为它们不是 NextJS 特定的。
我对样式做了一些修改，我觉得这样更有效。也就是说，我已将宽度设置从图像移至容器 div。您可以根据您的要求进一步修改此设置。
在您的设置中，代码将大致如下翻译。
{props.trip.name}
Time - Time
它的外观如下：
最大的包装
中号无包装
小而无包装
小，有包装
大小和换行发生变化的确切断点取决于您决定如何实现它。如果您对上述几点不满意，您可以根据需要简单修改
lg、md前缀。