I tried so many options but nothing work. Finally i am here to request the community to fix my issue. Basically i have Grid layout with 6 columns.

When my client upload images it start from left to right. The requirement is if they upload 1 or 2 or 3 images. It should maintain the center of the screen so that it looks nice in view.

Here is my code. If anyone can help me would be appreciated!

<div
   className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-6 gap-1 md:mt-20 mb-5"
   >
   {meta.media?.map((m, i) => (
   <AspectRatio ratio={9 / 14} key={i}>
   <img
   src={'/storage/' + (m.attachment)}
   className="h-full object-cover w-full"
   alt=""
   />
   </AspectRatio>
   ))}
</div>

Any solution appreciated!