Chose CSS Grid over flexbox for my portfolio rebuild and it was a mixed bag

Ngl, I went with a full grid layout for my site's main page last month but ended up fighting with it for two days on mobile breakpoints, so how did you guys handle responsive grid layouts without going crazy on media queries?

2 comments

2 Comments

patricia3855d ago

Oh man, did you try using grid-template-areas for your mobile layout? I had the SAME problem until I started defining the mobile version first with a single column grid and then expanding from there. Honestly, giving up on making it pixel perfect on every screen and just letting some items naturally wrap REALLY saved my sanity.

noah_black5d ago

Read an article just yesterday that said the same thing about mobile first design. The author called it "progressive enhancement" starting with one column and adding complexity as the screen grows. Tried it on my last project and had way less headaches with the responsive breakpoints. The key for me was keeping the mobile layout dead simple before even thinking about tablet or desktop.