搜索

首页  >  问答  >  正文

使用 Tailwind CSS 确保 CSS 网格中卡片的宽度和高度固定

我正在使用 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 进行设置吗?

P粉184747536P粉184747536273 天前474

全部回复(1)我来回复

  • P粉098417223

    P粉0984172232024-03-27 18:30:06

    我知道您想使用 Grid 进行设置,但不幸的是,它不是适合这项工作的工具。 Flexbox 最适合您的需求。 这是一个 tailwind 游乐场,显示您想要的输出。我链接的 Playground 不使用 NextJS,就像您的示例中那样。因此,我修改了一些内容,例如图像,因为它们不是 NextJS 特定的。

    我对样式做了一些修改,我觉得这样更有效。也就是说,我已将宽度设置从图像移至容器 div。您可以根据您的要求进一步修改此设置。

    在您的设置中,代码将大致如下翻译。

    // Grid
    
      {props.trips.map((trip: TTrip) => ( ))}
    // Card
  • {props.trip.name}

    Time - Time

  • 它的外观如下:

    最大的包装

    中号无包装

    小而无包装

    小,有包装

    大小和换行发生变化的确切断点取决于您决定如何实现它。如果您对上述几点不满意,您可以根据需要简单修改 lgmd 前缀。

    回复
    0
  • 取消回复