Submitted almost 3 years ago

3 Column Preview Card Component

Natasha• 50

@njohnson533

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

alec• 775

@AlecANL

Posted almost 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.

css tricks

and another example: codepen

I hope to help you.

Natasha• 50

@njohnson533

Posted almost 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.

Please log in to post a comment

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