Streaming live at 10am (PST)

Stretching image grid to fill screen

I have images in a grid that I’m wanting to group together and stretch to fill the screen with no gaps. However- when the project saves it automatically is adding white space to the outermost columns. Any tips on how to solve this issue?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @kparkour can you please post a screenshot of the issue and your project’s read-only share link. (how to share your site Read-Only link)

That would really help the community here on the forum be able to help you.


https://preview.webflow.com/preview/kpark-design?utm_medium=preview_link&utm_source=designer&utm_content=kpark-design&preview=18c091e7fbb9471e6c23f62d7290e743&workflow=preview

Thanks, just added. It’ll be fixed for a little bit after saving then the gap comes back.

So I wasn’t able to replicate the gap coming back on your project. If it keeps happening, can you record a GIF or video of it happening?

I do have some suggestion that may help. Instead of using auto for the grid column widths, try use 1fr instead. fr stands for fraction and with all columns being 1fr it’s like saying each column is ⅓ of the total width. There may be some funny CSS calculations happening if too may elements are set to auto. It can become unpredictable.

Next, the images can optionally be direct children of the grid. Then adding a height and width of 100% combined with fit cover will ensure that the images always fill up the available grid cell.

Hope that helps.

This worked, thanks so much!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.