Skip to content
Submitted 11 months ago

Responsive card layout using CSS Grid and Flexbox

Justin Connell•720
@justinconnell
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Leon_J•140
    @reaperxyndromePosted 11 months ago

    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
    0
    Justin Connell•720
    @justinconnellPosted 11 months ago

    Hi @LeonJ142857, Thanks so much for taking the time to provide me constructive review and feedback, I really appreciate it. I noticed the positioning is out as you pointed out and am fixing that - I put that down to a lack of attention to detail and assuming that the card was centered. The next challenge I will be using TailwindCSS - I was a bit hesitant to get onto a framework too soon, but as you suggest to really move up I should move on and continue building on the foundation I have. Thanks again and all the best for 2024!

    1
  • Driss Bouadoud•100
    @DrissssirDPosted 11 months ago

    The design looks exactly like the original Good job Justin keep doing great

    0
    Justin Connell•720
    @justinconnellPosted 11 months ago

    Thanks Driss

    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