How to Keep Grid Lines Visible While Editing in Squarespace
If you’ve been using the Fluid Engine editor, you know how handy the grid lines are for aligning your blocks perfectly. But did you know there’s a quick trick to keep those grid lines visible while you’re working? This can be a lifesaver when you’re trying to make sure everything is perfectly spaced and aligned.
In this tutorial, I’ll show you how to easily toggle grid lines on and off while editing your Squarespace website.
Watch the video
Check out the YouTube video below. 👇🏼
Why Keep Grid Lines Visible?
Grid lines are essential for:
Perfect Alignment: Ensure elements like images and text blocks are evenly spaced.
Consistent Design: Maintain balance and symmetry across your sections.
Streamlined Workflow: Quickly visualize layout spacing without guessing.
Step-by-Step Guide to Keeping Grid Lines Visible
Step 1: Open Your Squarespace Editor
Log in to your Squarespace account and navigate to the page you want to edit.
Click Edit to open the page editor.
Step 2: Add a Fluid Engine Section
Add a new section or edit an existing one.
Ensure it’s a Fluid Engine section (not a classic editor section). You can confirm this by checking the section type when adding or editing.
Step 3: Activate Grid Lines
Here’s the magic trick:
Hit the G key on your keyboard.
This will toggle the grid lines on, even if you’re not actively dragging a block.
You’ll see the entire section’s grid overlay, making it easier to align your blocks.
To turn the grid lines off, hit the G key again.
Example: Aligning Image Blocks Using Grid Lines
Let’s say you’re adding two image blocks to a section:
Add your first image block and place it in the center of the left half of the section.
With the grid lines visible, you’ll notice one row above and below the block and three columns on either side.
Duplicate the block for the right half of the section.
Drag it into place, ensuring it mirrors the spacing on the left. With the grid lines visible, it’s easy to align them perfectly.
Pro Tips for Using Grid Lines
Memorize the Shortcut: The G key is your friend! Use it to toggle grid lines on and off without navigating menus.
Test Across Devices: Always preview your layout on mobile and tablet views to ensure alignment holds across screen sizes.
Use Grid Lines with All Blocks: This trick works for image blocks, text blocks, buttons, and more.
Wrapping Up
Keeping grid lines visible in Squarespace is as easy as pressing a single key, but it can make a world of difference in your design workflow. Whether you’re aligning images, text, or other elements, this quick tip ensures your layouts are consistent and professional.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
