Skip to content
Submitted almost 2 years ago

Mobile first CSS Grid solution using React + SCSS + React Router

Allan Martinez•200
@allmtz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Galleria slideshow site
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello all, here is my solution. I used pure CSS Grid for the gallery layout. Any help on making the gallery layout match the design would be appreciated. Thanks !

Community feedback

  • Eugenia•950
    @JaneMorozPosted almost 2 years ago

    Hey! Congrats 🎉 Your solution to this challenge is awesome! ❤️

    The only things I've noticed:

    • You need to wrap the main content of the page into the <main> tag. It will solve all these landmark issues.
    • You can use object-fit: cover to the img, so it doesn't lose aspect ratio.
    • I have noticed that the original design has grid and images are different sizes, I had similar gallery layout in my other project. Here you can see that I used grid-template-areas and then positioned each image. It might help, if you want to make it more similar to the original design (not a must!).

    Keep it up! And good luck 🍀

    Marked as helpful
    1
    Allan Martinez•200
    @allmtzPosted almost 2 years ago

    @JaneMoroz

    Thank you for these great pointers !

    1

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