CODEWITHSUNDEEP
cssnext.jsgridtailwind-csscss-grid
nelakay
nelakay

Reputation: 303

CSS Grid in Tailwind creates a grid, put only populates certain cells

I am using Tailwindcss in my Next.js app, to display a number of images that come from a Supabase database on a grid. However, I am experiencing an issue, where when I inspect the page, the grid appears to be there, but the images are displayed in rows, rather than columns. Here's a screenshot of what I mean.

enter image description here

The way this is set up is with a component holding the image, which populates a gallery, and the gallery is nested in my index.js. This is what that looks like:

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>

I am looking to display all images on a grid, positioned side by side and wrapping to the next row, which to my understanding should be the default behavior of CSS Grid.

UPDATE: Upon further inspection of the site, I want to update the question. As you can see in the screenshot, the div that holds the grid container has been multiplied 5 times (which correlates with the number of items in the database).

Any ideas on what I am doing wrong? Thanks in advance.

Upvotes: 0

Views: 658

Answers (1)

John Li
John Li

Reputation: 7447

Update

Not too sure without testing the site, but it does looks like the grid container div is multiplied since Gallery is being mapped.

Any chance just 1 gallery is needed? In such case, perhaps consider not to map() the gallery, instead pass product data as props to gallery and map() the images.

Perhaps something like:

<div className="mx-auto">
  <Gallery images={product} />
</div>

<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">
    {props.images &&
      props.images.map((img) => <BlurImage key={img.id} img={img} />)}
  </div>
</div>

Original

I tried the posted grid container styles in this minimized test and it seems to have no errors.

Any chance the posted code of "GALLERY" could be missing a map()? Because it seems that each Gallery should probably be given a set of images to populate inside the grid container, by using BlurImage.

If this is the case, perhaps try remove the additional div wrapping BlurImage so the populate components are placed by the grid container.

GALLERY

// "images" is a placeholder for a set of images given to Gallery as props

<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">
    {images.map((item) => (
      <BlurImage key={img.id} img={img} />
    ))}
  </div>
</div>

Upvotes: 1

Related Questions