如何使用Tailwind CSS实现CSS网格中卡片宽高固定布局

你的问题出在使用了固定列数的Grid布局（如md:grid-cols-6），这种设置会让卡片宽度随容器宽度均分，导致窗口缩小时卡片被挤压。要实现卡片固定宽高、自动换行的需求，推荐以下两种方法：

方法一：Flex布局（更直观简单） #

用flex flex-wrap替代Grid的固定列数配置，Flex会自动在容器宽度不足时让卡片换行，同时保持卡片的固定宽度。

修改后的网格代码： #

<div>
    <ul className="flex flex-wrap gap-4">
        {props.trips.map((trip: TTrip) => (
            <TripCard trip={trip} href={currentPath + trip.id} />
        ))}
    </ul>
</div>

卡片代码无需修改： #

你的卡片已经设置了w-128固定宽度，h-fit会根据内容自适应高度；如果需要固定卡片总高度，把h-fit换成固定高度类（如h-[400px]或Tailwind内置的高度类即可）。

方法二：Grid自动填充布局 #

如果偏好Grid布局，可将固定列数替换为自动填充的列配置，让Grid自动计算容器能容纳的卡片数量，不足时自动换行。

修改后的网格代码： #

<div>
    <ul className="grid grid-cols-[repeat(auto-fill,minmax(32rem,0))] gap-4">
        {props.trips.map((trip: TTrip) => (
            <TripCard trip={trip} href={currentPath + trip.id} />
        ))}
    </ul>
</div>

• 32rem对应你卡片的w-128（Tailwind中w-128 = 32rem）；
• repeat(auto-fill, minmax(32rem, 0))表示自动生成宽度为32rem的列，容器宽度不足时自动换行。

卡片代码调整（可选）： #

可以保留w-128，也可以去掉——因为Grid列宽已固定为32rem，卡片会自动占满列宽。

额外提示 #

如果需要严格保持图片区域的宽高比例（而非固定高度），可以把图片容器的w-128 h-32替换为w-full aspect-[4/1]（对应原4:1的比例），这样即使卡片宽度调整，比例也能保持。不过如果需求是固定宽高，保留原固定尺寸类即可。

内容的提问来源于stack exchange，提问作者FlameDra