How to use Fluid Engine grid on Squarespace

beginner 8 min read Updated 2026-03-18

Quick Answer

Fluid Engine is Squarespace's drag-and-drop page builder that uses a flexible grid system for precise layout control. You can access it by editing any page and using the grid lines to position content blocks exactly where you want them.

Try Squarespace Full Squarespace Review

Prerequisites

Active Squarespace subscription
Access to your Squarespace website
Basic understanding of web design concepts
Squarespace 7.1 template or newer

Step-by-Step Instructions

Access Fluid Engine editor

Log into your Squarespace account and navigate to your website. Click Edit in the top left corner to enter edit mode. Select the page you want to edit or create a new page by clicking Pages in the left panel and then + Add Page.

Fluid Engine is available on Squarespace 7.1 templates and newer. If you're using an older template, consider upgrading first.

Understand the grid system

Once in edit mode, you'll see a flexible grid overlay on your page. The grid consists of 24 columns by default and automatically adjusts rows based on content height. Hover over any empty area to see the grid lines appear as blue dotted lines. This grid allows you to position content blocks with pixel-perfect precision.

The grid automatically responds to different screen sizes, making your design mobile-friendly without extra work.

Add content blocks to the grid

Click the + button or hover over an empty grid area to see the content block menu. Select from options like Text, Image, Gallery, or Button. Click and drag to define the size and position of your block on the grid. The block will snap to grid lines as you drag.

Hold Shift while dragging to maintain aspect ratio when resizing blocks.

Resize and reposition blocks

Click on any existing content block to select it. You'll see resize handles (small squares) at the corners and edges. Drag these handles to resize the block, or click and drag the block itself to move it to a new position. The content will automatically reflow and maintain proper spacing.

Use the alignment guides that appear when moving blocks to perfectly align elements with other content on your page.

Customize block spacing and styling

With a block selected, use the Design tab in the left panel to adjust spacing, colors, fonts, and other styling options. You can also adjust Padding and Margin settings to control the space around your content blocks for better visual hierarchy.

Consistent spacing between elements creates a more professional and cohesive design.

Use sections for better organization

Organize your content into sections by clicking + Add Section or hovering between existing sections. Each section acts as a container with its own background options and spacing controls. You can choose from different section types like Blank, Gallery, or pre-designed Layouts.

Sections help create visual breaks on your page and make it easier to manage large amounts of content.

Preview responsive behavior

Click the Device Preview icon in the top toolbar to see how your grid layout appears on Desktop, Tablet, and Mobile devices. Fluid Engine automatically optimizes your layout for different screen sizes, but you can make manual adjustments for each device if needed.

Always check mobile preview since most website traffic comes from mobile devices.

Save and publish your changes

Once you're satisfied with your grid layout, click Save in the top left corner to save your changes as a draft. To make your changes live, click Done to exit edit mode, then click Save again to publish your updated page to your live website.

Save frequently while working to avoid losing your progress, especially when making complex layout changes.

Common Issues & Troubleshooting

Content blocks won't snap to grid lines properly

Make sure you're dragging slowly and watch for the blue grid lines to appear. If the grid isn't visible, try zooming out or refreshing the page. Sometimes clearing your browser cache can resolve grid display issues.

Layout looks different on mobile than expected

Use the device preview feature to check mobile layout and make adjustments. Content automatically stacks on mobile, but you can customize the mobile layout separately by switching to mobile view in the editor.

Unable to resize blocks to desired dimensions

Ensure you're using the resize handles and not trying to drag from the center of the block. If blocks seem stuck, try refreshing the page or switching to a different browser. Some ad blockers can interfere with the editor functionality.

Changes not saving or publishing correctly

Check your internet connection and try saving again. If issues persist, try editing in an incognito/private browser window to rule out browser extensions. Make sure you have the necessary permissions if you're not the site owner.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Squarespace website before purchasing.

Visit Squarespace View Squarespace Pricing