Skip to content
Submitted 24 days ago

Bento Grid Challenge, Responsive Design, Desktop-First

TheGDneo•120
@GD-neo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Bento grid
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

Its been quite some time since I did any challenges. S I'm just really happy I managed to complete this task with the result I did.

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

It took me a while to figure out how to set the grid. I ended up setting two grids, each as display: inline-grid . One for the two left "cards" and then one for the remaining elements.

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

Would there have been a way to do this challenge with just one single grid?

I also added a small hover effect to the cards, so that they translate(-10px,-10px) and a box-shadow shows when you over over it. How could I slow down these effects so that its a bit easier on the eyes?

Community feedback

  • Kareem Ayman•160
    @KareemaymanPosted 24 days ago

    Good job on choosing the right dimensions and proper pixels for the design, It looks identical 👏

    To answer your questions, yes you could do the challenge with just 1 grid by dividing the container into more rows. I recommend looking up grid-column & grid grid-row properties on child elements as they allow you to have full control of the container grid.

    And to make the hovering effect slower & easy on the eyes you can use transition property for both translate & box-shadow properties so when you hover it changes state slower.

    2

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