Submitted 12 months ago

Four cards layout using CSS Grid

irene•120

@irene-panis

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

proud that i went with using css grid for this one, as usually i just use flexbox but i knew i'm worse at grid and needed the practice

What challenges did you encounter, and how did you overcome them?

making the mobile design... i wanted to learn how to implement the single column on mobile without a media query but in the end just used one. also as im typing this now im literally realizing i couldve just made the card container flex column on smaller screens instead of making a single column grid lol

What specific areas of your project would you like help with?

would like to know if there was indeed a way to implement the mobile design without media queries

Code

Please log in to post a comment

Community feedback

Hamid reza Mousavi nasab•120
@hmousavin
Posted 12 months ago
Quite nice! It's better than mines, since it's more similar to the desired images!

For an alternative to media queries on mobile design:
1. "Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics."
2. We can use Flex instead of media queries
Happy coding!
Marked as helpful

Join 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