Design comparison
Solution retrospective
CSS grid is incredible for building complex, responsive layouts. I learned how to utilize grid-template-areas
to make incredibly flexible layouts, making it a breeze to move things around as needed. Using this simple setup:
.grid-container { display: grid; gap: 1.5rem; grid-auto-columns: 1fr; grid-template-areas: "card-1" "card-2" "card-3" "card-4" "card-5"; padding-block: 2rem; margin-inline: auto; width: min(95%, 70rem); }
All I needed to do was rearrange the layout in a media query:
@media screen and (min-width: 70em) { .grid-container { grid-template-areas: "card-1 card-1 card-2 card-5" "card-3 card-4 card-4 card-5"; } }
And just like that, you have two totally different layouts for mobile and web, both fully responsive. It truly is a beautiful thing!
Also took advantage of CSS psuedo selectors to make styling the grid easier.
What challenges did you encounter, and how did you overcome them?Using all of the pseudo selectors, I ran into some styling conflicts and some styles overriding others and all that fun stuff. Thankfully I got it all sorted out pretty quickly!
Community feedback
- @OlamideLanrePosted 3 months ago
Great stuff! I really like your design, almost the same as the actual design. I will be looking into the grid concept you used for this project!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord