Skip to content
Submitted about 1 month ago

SASS Responsive Grid

Ivaylo Ivanov•260
@ValsCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned how to order items in a flex, size rows and columns and first layout my grid with the correct size and then add the rest of the stuff. Also dove deep into SASS's syntax for the first time.

What challenges did you encounter, and how did you overcome them?

I had trouble at the beginning when creating the grid and generally understanding SASS's syntax.

What specific areas of your project would you like help with?

For this project I was aiming to get as close as possible to the design's font and topography, I would like to hear some feedback on how I did and if there is anything I can improve in my SCSS.

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted about 1 month ago

    Hey Ivaylo Ivanov, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

    I noticed that your component is not centralized to solve this problem we can do the following:

    .container {
    display: grid;
    grid-template-rows: 17.625rem 16.625rem;
    grid-template-columns: repeat(4, 15.9375rem);
    row-gap: 1.5rem;
    column-gap: 1.875rem;
    justify-content: center;
    /* margin-top: 13%; */
    place-content: center;
    min-height: 100vh;
}

    Everything else looks great.

    Hope this helps! 👍

    Marked as helpful
    1
    Ivaylo Ivanov•260
    @ValsCodesPosted about 1 month ago

    @AdrianoEscarabote Thanks a lot for the feedback!

    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