Design comparison
Solution retrospective
Update: I figured out how to make the grid container responsive, but now I have another issue. I have noticed that when I use width: 100% in the body the desktop version is centered, but its stuck to the top of the page. When I use width: 100vh in the body, the desktop version is centered in both axes, but the mobile view cuts off the stop of the sedan card and the grid container isnt centered. Could anyone tell me how to center the grid container so that its consistent in both views or is this not possible with CSS Grid? Ive been trying to use CSS Grid over flexbox as thats my weak area, I thought they could render the same results, but maybe im wrong?
Community feedback
- @AlecANLPosted over 3 years ago
Hey natasha, I'm not expert but a try to help you, may use auto sizing column property in CSS grid. More explicit for example:
grid-template-column: repeat(auto-fill,minmax(250px,1fr))I'm not sure if that answer your questions, but if you want to read more.and another example: codepen
I hope to help you.
2@njohnson533Posted over 3 years ago@AlecANL Thank you! I appreciate it. I kept at it after I submitted it and grid-template-columns: repeat(auto-fit, 300px); worked for me. I used display: flex in the body in the initial solution and that was the reason why the grid container wasn't being responsive. Once I took that out it worked.
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