Design comparison
Solution retrospective
Proud that using grid to implement the layout was easy, finally :D
Also, proud I could use relative and absolute positions to put the quotation image, as I always afraid of using them 😅
What challenges did you encounter, and how did you overcome them?I tried to use subgrid to align all cards' content, but it was a nightmare 🤦🏻♀️, so I just used some padding and margin to align them.
What specific areas of your project would you like help with?Any feedback is welcomed :)
Community feedback
- @GenildocsPosted 3 months ago
Hello, congratulations on completing the challenge.
Here are some tips for you:- In the grid, there’s a property called
auto-fit
that automatically reorganizes grid items according to their size. It might be interesting for you to try it out instead of switching todisplay: flex
for mobile device resolutions. - Example:
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); row-gap: 25px; }
- To use this property, it's mandatory to have
minmax
for the grid items.
If this approach isn’t suitable, you could start by creating the grid for mobile devices first and then use media queries to adjust the columns.
- Example:
.container { display: grid; grid-template-columns: 1fr; row-gap: 25px; } .card { width: 300px; height: 300px; background-color: #ea7777; border: 1px solid black; } @media (min-width: 768px) { .container { grid-template-columns: repeat(4, 1fr); column-gap: 25px; } }
I hope these tips can help you.
Marked as helpful0 - In the grid, there’s a property called
Please log in to post a comment
Log in with GitHubJoin 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