How to Remove Grid Padding on Squarespace Fluid Engine

If you’ve read or watched any of my previous Squarespace tutorials then it will come as no surprise to hear that I love Fluid Engine.

In my opinion it’s changed the game for Squarespace web design, however there are a couple of tweaks that you can make to make it even better. You just have to know what and how.

One of those is removing the grid padding. If you’ve used Fluid Engine then you’ll know that the grids are padded, meaning each cell or grid section has padding around it. This means when you add multiple elements to your section, they don’t touch or fill the space.

Sometimes though, you want them to touch or fill the space. If so, you need to remove the grid padding.

Watch the video

Check out the YouTube video below 👇

Framework for designing a perfect homepage

Want a framework for designing the perfect homepage?

To remove grid padding on fluid engine it’s super simple. Head to the section that you want to remove grid padding from and select edit section.

In the panel that appears the option is right there. You simply need to hit the Gap icon that shows no gaps or padding.

Squarespace section grid image
Removing grid spaces in a section Squarespace image

And it really is as easy as that. In this panel you’ll also see an option to toggle on fill screen, if you want your sections to fill the screen then guess what? Toggle it on!

If you found this useful, be sure to check out more of my Fluid Engine resources by searching “fluid engine” on my Squarespace blog.

Schedule for guidelines from a expert web designer

Need an expert to build your Squarespace website?

Book a free kick-off call with our team to discuss your project requirements in detail.

Previous
Previous

How to Add a Drop Shadow to Images on Squarespace [Code Free]

Next
Next

How to Change Cookie Banner Content