Hi Campers,
I am reaching out to ask for your help for a personal project. I am working on a friend’s portfolio website, but I am hitting a roadblock with regards to the portfolio gallery.
My aim is to display a series of images (of different sizes) in the portfolio section. I have used flexbox to build the website’s layout. With regards to this specific section, the container div .section-content has the following properties:
.section-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
and it includes a series of images that are wrapped in another flex container (with the anchor tag that is there to use the Lightbox library).
However, I am having some troubles fixing the variable space between the various images, which changes according to the button that is clicked to filter the artworks.
I was wondering if display: flex is the best way to approach this project. I was thinking to rebuild my image gallery using flexbox grid, but I am unsure again if it’s the best way to go as the height and the width of all images is variable and I don’t want the images to shrink/expand to fit the screen.
Something else I have thought of is actually building an array of objects with all the images paths in the JavaScript file and then display these according to their size for each one of the possible filters.
What approach would you recommend for me to achieve a visually clean and functional image gallery?
Here is the link to the project on Github and a link to thepage.
Thanks!