I can't seem to render a grid with 4 product cards per row, instead they are all aligned and...

I'm rendering a set of product cards, however each card instance I render is being stuck to the left hand side of the page and they are all vertical. Ideally I'd want something like the image below. I'm a backend developer and terrible with Ui, I'd really appreciate it if someone could help me figure this out

preferred layout

<!-- Grid Container for Product Cards -->
<div class="grid grid-cols-4 gap-4 p-4">
<!-- Single Product Card -->
<div class="flex flex-col rounded-xl bg-white shadow-md p-4">
<div class="relative h-64 overflow-hidden rounded-xl">
<img
[src]="card.listingUrl"
class="h-full w-full object-cover cursor-pointer"
(click)="renderProductDetails(card.listingId)"
/>
</div>
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-lg font-semibold text-gray-900">{{ card.title }}</h3>
<p class="text-gray-600">${{ card.price }}</p>
<p class="text-sm text-gray-500 flex-grow">{{ card.description }}</p>
<button class="mt-auto bg-blue-600 text-white px-4 py-2 rounded-md">
Add to Cart
</button>
</div>
</div>
</div>

Continue reading...