Verwenden Sie Tailwind CSS, um eine feste Breite und Höhe der Karten im CSS-Raster sicherzustellen

Question

Ich erstelle eine App mit Tailwind CSS und React und in einer der Ansichten habe ich ein Kartenraster. Aktuell sieht es so aus:

---

---

---

Wie Sie sehen können, quetschen sich die Karten hinein, wenn ich das Fenster verkleinere. Ich möchte sicherstellen, dass die Kartengröße (Breite und Höhe) immer gleich bleibt und wenn die Anzahl der Karten nicht in eine Reihe passt, weil das Fenster kleiner wird, wird es einfach in die nächste Reihe verschoben.

Ähnlich wie (Hergestellt mit MS Paint):

---

---

---

Die Größe der Karten bleibt unverändert (gleiches Seitenverhältnis), auch wenn der Bildschirm kleiner wird.

So sieht mein Code derzeit aus:

Gitter:

<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>

Karte:

<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>

Wissen Sie, wie man es mit tailwind-css einrichtet?

Answer 1

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

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

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

// Grid

    

        {props.trips.map((trip: TTrip) => (
            
        ))}
    


// Card
    

        

            
        
        

            
{props.trip.name}
            
Time - Time
        
    

它的外观如下：

最大的包装

中号无包装

小而无包装

小，有包装

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