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?
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
@Flashdaniel
Posted
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; */
}
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
