Utilisez Tailwind CSS pour garantir une largeur et une hauteur fixes des cartes dans la grille CSS

Question

Je crée une application en utilisant Tailwind CSS et React, et dans l'une des vues, j'ai une grille de cartes. Actuellement, cela ressemble à ceci :

---

---

---

Comme vous pouvez le voir, lorsque je rétrécis la fenêtre, les cartes s'y glissent. Je veux m'assurer que la taille de la carte (largeur et hauteur) reste toujours la même et si le nombre de cartes ne rentre pas dans une rangée à mesure que la fenêtre devient plus petite, elle passe simplement à la rangée suivante.

Similaire à (Fabriqué avec MS Paint) :

---

---

---

La taille des cartes reste fixe (même rapport hauteur/largeur) même si l'écran devient plus petit.

Voici à quoi ressemble actuellement mon code :

Grille :

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

Carte :

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

Savez-vous comment le configurer à l'aide de tailwind-css ?

Answer 1

Je sais que vous souhaitez utiliser Grid pour le configurer, mais malheureusement ce n'est pas le bon outil pour ce travail. Flexbox est la mieux adaptée à vos besoins. Il s'agit d'un terrain de jeu tailwind qui affiche la sortie souhaitée. Le terrain de jeu que j'ai lié n'utilise pas NextJS comme dans votre exemple. J'ai donc modifié certaines choses, comme les images, car elles ne sont pas spécifiques à NextJS.

J'ai apporté quelques modifications au style qui me semble plus efficace. Cela dit, j'ai déplacé le paramètre de largeur de l'image vers le conteneur div. Vous pouvez modifier davantage ce paramètre selon vos besoins.

Dans votre configuration, le code se traduira à peu près comme suit.

// Grid

    

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


// Card
    

{props.trip.name}

Time - Time

Ça ressemble à ça :

Le plus gros colis

Taille moyenne sans emballage

Petit et sans emballage

Petit, emballé

Le point limite exact auquel les changements de taille et d'emballage se produisent dépend de la manière dont vous décidez de le mettre en œuvre. Si vous n'êtes pas satisfait des points ci-dessus, vous pouvez simplement modifier le préfixe lg、md selon vos besoins.