Gunakan Tailwind CSS untuk memastikan lebar dan ketinggian tetap kad dalam grid CSS

Question

Saya sedang membina apl menggunakan Tailwind CSS dan React, dan dalam salah satu paparan saya mempunyai grid kad. Pada masa ini ia kelihatan seperti ini:

---

---

---

Seperti yang anda boleh lihat, apabila saya mengecilkan tingkap, kad-kad itu menyelit ke dalamnya. Saya ingin memastikan bahawa saiz kad (lebar dan tinggi) sentiasa kekal dan jika bilangan kad tidak sesuai dalam satu baris apabila tetingkap semakin kecil, ia hanya bergerak ke baris seterusnya.

Serupa dengan (Dibuat dengan MS Paint):

---

---

---

Saiz kad kekal tetap (nisbah bidang yang sama) walaupun skrin semakin kecil.

Beginilah rupa kod saya pada masa ini:

Grid:

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

Kad:

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

Tahu cara menyediakannya menggunakan tailwind-css?

Answer 1

Saya tahu anda mahu menggunakan Grid untuk menyediakannya, tetapi malangnya ia bukan alat yang sesuai untuk tugas itu. Flexbox paling sesuai untuk keperluan anda. Ini ialah taman permainan angin ekor yang memaparkan output yang anda inginkan. Taman permainan yang saya pautkan tidak menggunakan NextJS seperti dalam contoh anda. Oleh itu, saya mengubah suai beberapa perkara, seperti imej, kerana ia tidak khusus NextJS.

Saya membuat beberapa pengubahsuaian pada gaya yang saya rasa lebih berkesan. Yang berkata, saya telah mengalihkan tetapan lebar daripada imej ke div bekas. Anda boleh mengubah suai tetapan ini mengikut keperluan anda.

Dalam persediaan anda, kod akan diterjemahkan secara kasar seperti berikut.

// Grid

    

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


// Card
    

        

            
        
        

            
{props.trip.name}
            
Time - Time
        
    

Ia kelihatan seperti ini:

Pakej terbesar

Saiz sederhana tanpa pembungkusan

Kecil dan tiada bungkusan

Kecil, padat

Titik tepat di mana perubahan saiz dan pembalut berlaku bergantung pada cara anda memutuskan untuk melaksanakannya. Jika anda tidak berpuas hati dengan perkara di atas, anda boleh mengubah suai awalan lg、md mengikut keperluan anda.