Live Code: Frontend Mentor Bento Grid

🔗 Key Links 🔗

🌐 Connect With Me 🌐

[xphstos_]

Yeap, they usually provide badly exported images and that sad.
Well consider this as a challenge. In desktop mode the multiple image only 55%-60% visible.

I tackled all the images by using percentages more than 100% of their parent element (.bento-item in your case) and clipped them out.
That's the only way to achieve the same design in all resolutions.

To be honest oftentims they choose bad fonts as well, fonts with shifted baseline making them bad for the web.
In this design, that wasn't the case thankfully, but the kerning they use is pretty bad if you stick to the actual designs.
Unless there is something wrong with figma when exporting frames -> images, it's pretty possible.
If you use the designs in figma and try to match the types you'll end up with negative letter-spacing around 7% - 8%.
If you apply those number in CSS you'll end up with unreadable text.

I found this exercise to be tricker that I thought but it appears to be a pretty good case for `display: contents`.

[groovebird]

Hey, i like the Theme you are using. Could you give me the name please? What is the extension to show the color as the background at the hsl notation?

[pawelczar]

what is that tool which read text from jpg layout??

[maziidev]

Please which extension did you use to search for your google fonts
Good tutorial btw