Grid displaying differently on builder vs. preview

Hello!

I’ve created a collection list with a grid and used one of the tips on the forum about how to keep my images square by setting width to 100% along with padding. I’ve attached a screenshot that shows that it looks exactly how I want to on the builder but if you look at the link, weirdly the first column is displaying larger than the content on the other columns. Quite confused as to why it’s behaving like this, the grid specifies all columns are 1FR and again it looks fine before I hit preview.

Any help would be appreciated, thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/jasons-blank-site-f14e1a?utm_medium=preview_link&utm_source=designer&utm_content=jasons-blank-site-f14e1a&preview=fd6ad17d7613c29f8a33988ff5ed8fb6&pageId=5db729c0c0d9b49c3e1082e2&mode=preview

You only set the max width. Set the actual width and height to 100px and see if that helps.

I wanted to leave it as auto so that it would be responsive

it will still be responsive as it’s the outer container controls responsiveness.

Set your width to 100%, not max-width.

Edit: As a matter of fact the problem is also because of the margins of your “about content” div. Remove margins and instead use paddings. The columns will be the same width after that.

I adjusted it to width - 100% as well as changing my about content to use padding instead of margins and im still getting the same problem unfortunately

Can you share your published link?

Here you are: https://jasons-blank-site-f14e1a.webflow.io/about

Ah I see. The long email wouldn’t let our grid element to become smaller than this text. You may set overflow:hidden for your collection item. In this case your email address will be cut off though.

Ah that solved it, thank you so much!

Hello! I’m having a similar problem. Grid is almost fully responsive in the designer, but doesn’t change at all in preview mode. When I set padding to the container it aligns to the right as well. Any idea how to fix this?

Link: https://preview.webflow.com/preview/egenlokal?utm_medium=preview_link&utm_source=designer&utm_content=egenlokal&preview=24589ab4b2fa79517872f84ee28cc65f&pageId=5f6cd0936447e1d2e08439a3&mode=preview