Grid Styling Not Working

[jenylu]

I was testing out the example below and the lightbox functionality works but I can't get the grid cols to work. They seem to change depending on how wide the browser is, like if the images are smaller then the columns increase to fill the page instead of staying at 3.

I'm somewhat confused where the css styling on SlideshowLightbox comes from also? When I inspect the element, I can see that the styling for 'grid' and 'grid-cols-3' don't show up and I don't see it inside of index.css.

Looking for any help here, thank you!

<SlideshowLightbox className="container grid grid-cols-3 gap-2 mx-auto">
    <img style={{width: "100%", display: "block"}} className="w-full rounded" src='./images/scribbles/Christmas.jpg' />
    <img style={{width: "100%", display: "block"}} className="w-full rounded" src="https://source.unsplash.com/AYS2sSAMyhc/1400x1200" />  
    <img style={{width: "100%", display: "block"}} className="w-full rounded" src="https://source.unsplash.com/Kk8mEQAoIpI/1600x1200" />
    <img style={{width: "100%", display: "block"}} className="w-full rounded" src="https://source.unsplash.com/HF3X2TWv1-w/1600x1200" />
  </SlideshowLightbox>

[jenylu]

Update: I realized I have to wrap my original styling div around the SlideshowLightbox instead of the other way around to keep my old masonry layout. Trying to click into the lightbox from there was out of order though so decided to just stick with the original square grid.

However I am still confused on where the css for SlideshowLightbox lives in for the class names like 'grid' and 'grid-cols-3'. Not sure if anyone knows more here?

[silvia-odwyer]

@jenylu Hi there! The grid grid-cols-3 classes are Tailwind classes, which you can use to style the layout. You can install Tailwind CSS to add it to your project, and the classes will then be applied. Of course, this is just one way to arrange the images in a grid, you could just use regular CSS too.