Is there a way to have a CSS Grid style layout without knowing the sizes of your images in advance?

Question

Basically I'm retrieving images from Reddit and want to display them neatly in a gallery-style grid. I can use a flex display and resize the images to have the same dimensions, but of course they don't all have the same dimensions and it just doesn't look that good. Is CSS Grid capable of this? I haven't been able to find any information about this. I'm using React JS with Sass if that helps. Any help is much appreciated.

Keep fixed size for css grids and for image just use `width="100%"` and `height="100%"` which fixes with grid gives you uniform view of image — Nithin - Techidiots, May 04 '21 at 12:15

score 0 · Answer 1 · answered May 04 '21 at 12:17

I have never really tried this, but from the top of my head I can think of two things:

Retrieve the image's dimensions with Javascript and dynamically construct the grid-template-areas property with it. You could divide your grid in imaginary rows and columns and set some base values to round up the amount of rows and columns an image will take.
Use the css property object-fit: cover. It's not perfect, but it doesn't stretch the image. With this, you could also assign classes to the images based on their dimensions and orientations and get an approximation. It's simpler.

Is there a way to have a CSS Grid style layout without knowing the sizes of your images in advance?

1 Answers1