How to ensure a CSS grid has cards with fixed width and height using Tailwind CSS-CodePudding

I'm using Tailwind CSS and React to build an app, and in one of view I have a grid of cards. Currently it looks something like this:

As you can see, the cards squeeze in as I make the window smaller. I want to ensure that the cards size (width and height) always stays the same, and it just moves to the next row if the amount of cards don't fit on one row as the window gets smaller.

Something like (made in MS paint):

Where the size of the cards stay fixed (same aspect ratio) even though the screen is getting smaller.

Here's how my code looks currently:

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>

Card:

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

Any idea how to set this up using Tailwind CSS?

CodePudding user response：

I know you wanted to set this up using Grid, but unfortunately, it is not the right tool for this job. Flexbox would be best suited for your needs. Here is a

Medium without wrapping

Small without wrapping

Small with wrapping

The exact breakpoints where the size and wrapping changes, depends on how you decide to implement it. If you are unhappy with the above points, you can simply modify the lg, md prefixes, as per your needs.

CodePudding user response：

The simplest way of getting this done is via flex and flex-wrap and setting fixed desired height and width for the cards

Code Structure:

<div >