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

MDN Learn
,
#1

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?

Screenshot_2
Screenshot_21791×1279 78.7 KB

#2

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.
2 Likes
#3

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:

2 Likes