搜尋

首頁  >  問答  >  主體

使用 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 天前479

全部回覆(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
  • 取消回覆