Skip to content
Submitted 6 months ago

Four cards layout using CSS Grid

irene•120
@irene-panis
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Hamid reza Mousavi nasab•120
    @hmousavinPosted 6 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
    0

Please log in to post a comment

Log in with GitHub

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