Need Help Fixing Bento Grid in Safari

Design help General
1

Hi everyone,

I built a simple bento grid that works well on mobile and in Chrome on desktop. However, I’m running into issues with Safari—it breaks, especially on narrower screens. Initially, it was even more broken, but I tried setting a max height of 300px, which helped a bit. Unfortunately, it still doesn’t work as expected on smaller screens.

I’d really appreciate any insights or suggestions on what might be causing this. Thanks in advance for your help!

image
image1920×1038 105 KB

Here is my site Read-Only: [LINK][1]

2

Hi there,

There are two effective ways to make your grid responsive across all browsers and screen sizes:

For manual control, you can style your grid layout across different breakpoints. Start by setting your grid direction to Row, then adjust the number of columns at each breakpoint as needed. Just make sure none of your grid elements are manually positioned or spanning multiple columns, as this can interfere with the responsive behavior.

For an automated solution, use the auto-fit feature:

  1. Delete all columns except one
  2. Remove all rows except one
  3. Set your minimum and maximum column dimensions
  4. Enable the Auto-fit option

The auto-fit method will automatically generate and adjust columns based on your container width and content, creating a responsive layout with minimal configuration.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Unfortunately this did not help. I’m still struggling with the same issue. I can’t find a way to make the containers height flexible.

Help needed

4

image
image498×228 59.1 KB

I found a solution there. Try changing display: inline-flex to display: grid.

And I don’t know why you are using separate divs for rows. just have 6 elements inside the main grid instead of having div with grid > div with grid for rows > div for element

Something like this: Webflow - Mifundo for Banks - 26 March 2025 | Loom

5

Wow, it actually worked! And now it makes so much more sense.

I initially followed a YouTube tutorial that suggested using separate divs for each row, but your approach is way more logical—and it works perfectly!

Huge thanks for taking the time to explain everything and even creating a Loom recording. That was next-level support. You’re a 10/10!