Community forum for knowledge and support

Updated last year

Fixing Squished Grid Items on Smaller Breakpoints

At a glance

A community member is using Webflow's Layout 414 and is experiencing an issue where some items in the grid list are being squished on smaller breakpoints. They have seen a T.RICKS video where this issue can occur with Webflow grids that auto-generate 12 columns, but they can't remember how to fix it. Another community member suggests looking at the lazy load settings and ensuring they are set for eager loads, as the items may be scrolling off-canvas. The original poster then shares that they were able to fix the issue by setting a minimum and maximum value for each column and auto-generated column, where the minimum is a rem value and the maximum is 1fr. However, this solution is a bit slow as they had to set four values per breakpoint since the layout is made of two grids.

Hey, I'm using Layout 414 and having some trouble with some items in the grid list being squished on smaller breakpoints. Here's a screenshot. The Italian and French flags are smaller than the others.

I've seen a T.RICKS video before where Webflow grid that auto-generate 12 columns can have this issue. I can't remember how to fix it though. Any help would be greatly appreciated!

M
E
3 comments

hmm yeah that might be a possibility - hard to say without a read-only link but another thing to look at is the lazy load and making sure its set for eager loads with page - since these are scrolling off canvas. If its at the top of the page, its less likely the issue - but if its further down the page, most likely the issue.

If you want to send a long a read only or DM it to me, I can poke around more though.

Interesting, I wouldn't have that the loading attribute would affect it!

I managed to fix it by setting a min and max value for each column and auto-generated column, where the min is a rem value and the max is 1fr. It works great but it's a bit slow because I had to set four values per breakpoints (as this layout is made of two grids)

yeah you and me both - had it catch me off guard on a couple of other issues in the past. Glad you got it resolved!

Add a reply
Sign up and join the conversation on Slack