我正在使用 Tailwind CSS 和 React 來(lái)構(gòu)建一個(gè)應(yīng)用程序，在其中一個(gè)視圖中我有一個(gè)卡片網(wǎng)格。目前它看起來(lái)像這樣：
如您所見(jiàn)，當(dāng)我縮小窗口時(shí)，卡片會(huì)擠入其中。我想確保卡片大?。▽挾群透叨龋┦冀K保持不變，并且如果隨著窗口變小，卡片數(shù)量無(wú)法容納在一行中，它只會(huì)移動(dòng)到下一行。
類似于（用 MS 油漆制成）：
即使屏幕變小，卡片的尺寸也保持固定（相同的寬高比）。
這是我的代碼當(dāng)前的樣子：
網(wǎng)格：
<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 進(jìn)行設(shè)置嗎？
1
0
0
我知道您想使用 Grid 進(jìn)行設(shè)置，但不幸的是，它不是適合這項(xiàng)工作的工具。 Flexbox 最適合您的需求。 這是一個(gè) tailwind 游樂(lè)場(chǎng)，顯示您想要的輸出。我鏈接的 Playground 不使用 NextJS，就像您的示例中那樣。因此，我修改了一些內(nèi)容，例如圖像，因?yàn)樗鼈儾皇?NextJS 特定的。
我對(duì)樣式做了一些修改，我覺(jué)得這樣更有效。也就是說(shuō)，我已將寬度設(shè)置從圖像移至容器 div。您可以根據(jù)您的要求進(jìn)一步修改此設(shè)置。
在您的設(shè)置中，代碼將大致如下翻譯。
// Grid// Card{props.trips.map((trip: TTrip) => (
))}
它的外觀如下：
大小和換行發(fā)生變化的確切斷點(diǎn)取決于您決定如何實(shí)現(xiàn)它。如果您對(duì)上述幾點(diǎn)不滿意，您可以根據(jù)需要簡(jiǎn)單修改 lg、md 前綴。
