Skip to content
Submitted 6 months ago

Product preview card using CSS flex and grid

María López•240
@oppahero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Instead of using the media query to change the columns of the grid template, I want it to be a dynamic grid.

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

Initially I made a dynamic grid assigning it to the card grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) and it worked well

However, when I set max-width max-width: 600px; to the card it stopped working correctly

What specific areas of your project would you like help with?
  • Html semantic
  • Grid

How can I make a dynamic grid without using media queries grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) , but make the container have a maximum width

Community feedback

  • Daniel•260
    @FlashdanielPosted 4 months ago

    Great solution Maria. I Cloned your repo and checked it out myself. i found out that the problem is not the max-width on the container, but the flexbox algin-items property on main used in centering the card. Remove it and you have a dynamic grid.

    main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
    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