Submitted 10 days ago

Responsive Bento-style grid layout using CSS Grid and Flexbox.

Waldo-Noe-Liberato-Jara•40

@Waldo-Noe-Liberato-Jara

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?

I'm proud of having completed this project without using Figma or any other design software. Instead, I relied on the provided image and adapted the design for the requested screens.
Next time, I would approach the layout with a better understanding of CSS Grid, avoiding fixed media-based breakpoints. I'd explore more flexible options for responsive layouts.

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

Aligning image dimensions: Ensuring images fit well within the layout was challenging.
- Solution: I tested different image sizes and aspect ratios to make them fit. Using CSS properties like object-fit helped with maintaining aspect ratios.
Making the site responsive: Adapting the layout for various screen sizes took time.
- Solution: I used precise measurements for row, column, and image sizes. Checking available CSS properties and experimenting with practical solutions improved my understanding of responsiveness.

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

Since I relied solely on an image for guidance, I'm unsure if my font sizes, image sizes, and even the overall grid layout match what was intended.
Feedback request: I'd appreciate feedback on best practices for approximating font and image sizes when only an image is provided. Any tips on achieving a balanced grid layout that closely resembles a reference image would be incredibly helpful.

Community feedback

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