Responsive card layout using CSS Grid and Flexbox

Solution retrospective
I took a mobile first approach and decided to use CSS Grid for the layout - one ting that tripped me up was implementing the desktop version and trying to get the grid centered on the screen - to solve this I set the <main>
to 100vh and 100vw, which allowed me to set the margin on the grid to 'auto'.
I also tried using BEM - I'm still new to this so any feedback that will help me write cleaner code will be much appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @reaperxyndrome
Hello, I really like your solution and the simplicity of it all . It looks good and looks similar to the design although there are some positional differences, is that intentional? Also, I have looked at the GitHub repository and I see that you have added a README.md file which includes your process. This is really good, I advice you to keep up the good work. I would also would like to provide some advice regarding what next steps you can take: learn tailwind CSS. Why? Because tailwind CSS will make writing CSS much faster, especially when you pair it with frontend frameworks that allow you to decompose your HTML (JSX) into multiple components. Tailwind CSS is an atomic CSS utility classes framework. There are some things you need to configure first though, which you can look into the Tailwind documentation. https://tailwindcss.com/docs/installation
That is all from me. Keep up what you are doing 👍. Once again, congratulations and cheers! 🎉🎉🎉🥳🥳🥳
Marked as helpful - @DrissssirD
The design looks exactly like the original Good job Justin keep doing great
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