recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 ?

P粉184747536P粉184747536273 Il y a quelques jours477

répondre à tous(1)je répondrai

  • P粉098417223

    P粉0984172232024-03-27 18:30:06

    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 lgmd selon vos besoins.

    répondre
    0
  • Annulerrépondre