Using flexbox or/and grid to achieve Instagram-like layout

Good day!
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?

Hello! I’m not an experienced web developer, but it might be worth looking at my code:

Notice the last 3 lines in the .cards selector and the media query.
I hope this helped you.

Thank you for your reply!
Funnily enough, I have completed this task myself after following the CSS lessons and I have no idea why I did not think of re-visiting this task to draw ideas from! Thank you again very much! :clap: