I need help with layout problem Grid

[Melody_Roma]

Hello everyone,
I have used this template for my website, inside the shops page I have used this grid, to show different locations and the photos of business.
Everything in working in the desktop, but when I switch to tablet and lower 2 of the boxes overlap. I have not understood the reason.

---

Here is my site Read-Only: Webflow - Melody leather Boutique

[WebflowAIModerator]

Hi there,

When working with grid layouts, overlapping boxes on tablet and mobile are a common challenge when grid children have manual positioning. This typically occurs when grid cells intersect across different breakpoints.

Here are several ways to resolve this issue:

1. Simplify your grid structure on smaller breakpoints by removing unnecessary columns. This creates a more streamlined layout that’s less prone to overlapping.

2. Change your grid Direction to Row. This ensures elements flow sequentially rather than potentially overlapping in a column layout.

3. Review your child elements’ column spanning settings. Adjust any elements that might be creating conflicts by spanning across multiple columns.

4. Use the auto-fit feature for a fully responsive solution. To implement this:

• Delete all but one column and row
• Set your minimum and maximum dimensions for the grid
• Enable the Auto-fit option in your grid settings
  This approach automatically generates and wraps columns based on available space, ensuring consistent spacing across all screen sizes.

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