I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid when inspecting the page. A visual reference can be seen in this screenshot: https://i.sstatic.net/ArP4n.jpg
The setup involves a component that contains the image, populating a gallery nested within my index.js file. Here is how it's structured:
IMAGE
<a href={img.id} className='group'>
<div className='aspect-w-3 aspect-h-4 w-full overflow-hidden rounded-md bg-gray-200'>
<Image
alt={img.title}
src={img.imageSrc}
width="200"
height="300"
layout="fill"
objectFit='cover'
className={cn('group-hover:opacity-75 duration-700 ease-in-out', isLoading? 'grayscale blur-2xl scale-110':'grayscale-0 blur-0 scale-100')}
onLoadingComplete={() => setLoading(false)}
/>
</div>
GALLERY
<div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl">
<div className="grid grid-cols-1 grid-flow-row-dense gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<div>
<BlurImage key={img.id} img={img} />
</div>
</div>
</div>
INDEX
<div className="mx-auto">
{product.map((img) => (
<Gallery key={img.id} img={img} />
))}
</div>
My goal is to have all images displayed on the grid, aligned side by side and wrapping naturally to the next row, which should be the default behavior of CSS Grid.
UPDATE: After further examination of the website, I would like to revise my query. As shown in the screenshot, the div containing the grid container has been replicated 5 times (corresponding to the number of items in the database).
If you have any insights on what might be causing this issue or suggestions on how to resolve it, I would greatly appreciate your assistance. Thank you in advance.