I am looking for some help in taking further steps with my practice project.
I have created a fully responsive website using only flexbox, and after studying grid, I was interested in re-creating the same webpage using both grid and flexbox.
The picture I’ve attached below shows the basic layout of the page I want, where the main container would have Instagram-styled boxes ( max 3 per row on a widescreen, reducing all the way to a singular column for mobile devices ). After playing with grids and trying different approaches to making this come to reality, I ran into (nested grid) responsive layout problems, which made me question if grid approach to the whole Instagram-style layout is the right idea.
My flexbox-only method uses
flex-flow: wrap; and
justify-content: space-evenly; for the main container to achieve (although not perfect responsiveness) results.
What would an experienced web developer suggest to me in this situation?