Skip to content
Submitted 7 months ago

Bento Grid Challenge, Responsive Design, Desktop-First

TheGDneo•120
@GD-neo
A solution to the Bento grid challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • Kareem Ayman•270
    @kareemayman

    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.

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