Submitted about 1 month ago

Bento Grid Challenge, Responsive Design, Desktop-First

TheGDneo•120

@GD-neo

Preview site View code

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 about 1 month 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

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