How to always display grid lines on Squarespace fluid engine

Squarespace fluid engine has changed the game when it comes to the layouts we can have on our websites but the feature can be fiddly at times. 

Trying to line elements up and place them where you want them doesn’t always go to plan and grid lines, that make lining elements up ten times easier, only appear when you hold down the element you want to move. 

The good news however is that there’s a super simple keyboard shortcut you can use which keeps the grid lines displayed on your screen at all times, not just when you click an element. This is perfect for when you need precision and want to ensure you’re lining your blocks and elements up correctly.

Watch the video

Check out the YouTube video below 👇

How to always have grid lines visible on Squarespace fluid engine 

Once you’ve added your fluid engine section within your edit dashboard you can first select what you want your grid to look like and how many sections you want it to include in the edit grid panel. 

Then, in order to ensure that grid is displayed at all times, simply use the following keyboard shortcut:

‘G’

I actually thought you had to press ‘Command + G’, but it turns out just tapping ‘G’ will suffice - easy peasy!

Persistent grid lines in Squarespace's fluid engine feature

How your editor looks with the grid in place

You can also use these same keyboard shortcuts to remove the visibility of the grid too. 

Having the grid permanently visible means you can see exactly where you need to position elements to ensure they’re precisely lined up on the screen.


📩 Join the inner circle to get exclusive code updates


This shortcut will also always display the centre line which is incredibly handy for creating balanced and symmetrical designs. 

So there you have it, a super simple keyboard shortcut that can totally change the game when it comes to easily creating balanced and precise designs using Squarespace fluid engine.


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Removing animation style from one image only

Next
Next

How to extend an expired Squarespace trial