I’m looking for some design help making a grid of images from the CMS, which have variable sizes, responsive.
You can see on this site here: DET :: The Art Of Gaming what I am trying to do. Some images are taller/wider than others, but the row height is broadly consistent and the row width is always the same & with the same spacing.
At different screen sizes, some images within a row wrap down to the next, but the row width and spacing is consistent.
So far I’ve tried using Grid and Flexbox to create this.
Here: https://i.gyazo.com/1b38a529c4a794469db019ba723d09e8.mp4 you can see what happens when I use Flexbox with wrapping. I can get the images and their respective div block that contains the information the conform to the row height and wrap down to the next row. But there are gaps on the right hand side.
Here: https://i.gyazo.com/a73ef3cc31963d877b75d0caa53dd64b.mp4 and on my site link you can see what happens when I use Grid. I lose the row height consistency as the structure of the grid is dependent on the image height. However, I can keep the wrapping by setting grid width on different screens and this also fixes the issue of the space on the right by using grid.
Is there a way to replicate what has been done on the DET site? Keeping the row width and wrapping, but also keeping the row height consistent? I hope to use this site as a sort of Archive/Portfolio for my images, which I’d upload to the CMS, without needing to manually design them on the page every time.
My initial thought was that this would not be possible using Grid, as this essentially needs to ‘break’ columns to fill the row with the correct width images.
On my site link, you can view the Flexbox tests I’ve done by adding the “flexbox test” class to “Collection Grid/Flex”.
Thank you for any help! and good luck with your own sites!
Here is my site Read-Only: Webflow - AOP