Submitted 6 months ago

👻 Grid Section: Bento (HTML + CSS + JS)

animation

Natali 👻 Grimm•1,190

@Grimm-N

A solution to the Bento grid challenge

Preview Code

Solution retrospective

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

I'm excited to start the Junior stage. I've tweaked the color scheme a bit again, added some animation, and transition states for the Grid layout.

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

I would really like to make this grid more flexible and responsive, rather than just changing its state with media queries, but for now, this is what we have.

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

I would love to hear suggestions on how to make the grid more flexible.

Code

Please log in to post a comment

Community feedback

Asilcan Toper•2,900
@KapteynUniverse
Posted 6 months ago
Hey Natali, great job.

I don't know how you can implement to a grid something like this where every item should have a specific position and span but you can combine auto-fit, repeat and minmax for a responsive grid.

grid-template-columns: repeat(auto-fit, minmax(256px, 1fr))

With this method, items wrap with an ugly way tho. If you try it, Kevin Powell has a nice video for that problem.

Also i think this one fit nice with your page.
```
body {
    overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: #1e1e24;
}
body::-webkit-scrollbar-thumb {
  background: #6649b8;
}
```
Look to the scrollbar
Marked as helpful
Gotyan•390
@eduardoramirezrojas
Posted 6 months ago
This is a different level! 😲😳 I loved the background, it looks like it has a filter on it which makes it look even more interesting. The overall design is very well taken care of, it looks polished and visually appealing. However, I noticed that you are using a lot of div, you might consider using more semantic tags to improve the accessibility and SEO of your project.

Other than that, it looks beautiful! 😊 I would love to get your feedback on my projects too; your perspective would be a great help in continuing to grow.

Thanks and great work! 🙌!

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