Fluid Engine Squarespace

How the Fluid Engine Works

The Grid System

The Fluid Engine uses a visible grid that appears when you edit a section. The grid has 12 columns and multiple rows that expand as you add content. Blocks snap to grid intersections, which keeps elements aligned while giving you the freedom to place them anywhere on the grid. The grid lines are guides, not constraints - you choose where blocks go.

Block Placement

Click the plus icon or drag a block from the block menu to any position on the grid. The block lands at the grid position closest to where you drop it. Move blocks by clicking and dragging them to new positions. The grid provides visual feedback showing where the block will land before you release.

Block Sizing

Resize any block by dragging its edges or corners. A text block can span two columns or ten columns. An image block can be tall and narrow or short and wide. This flexibility lets you create layouts that would require Custom CSS on the Classic Editor. For CSS techniques that complement the Fluid Engine, our guide to adding custom CSS to Squarespace covers advanced styling.

Overlapping Elements

The Fluid Engine supports element layering - you can place a text block on top of an image block, overlap two images, or position a button over a background section. This creates visual depth and modern design effects that the Classic Editor's flat layout cannot achieve.

Desktop and Mobile Editing

One of the Fluid Engine's most valuable features is separate desktop and mobile layout editing. After arranging your desktop layout, switch to the mobile editor (click the phone icon) and rearrange elements specifically for mobile screens. You can change block positions, sizes, and visibility independently for each device without affecting the other.

This solves the Classic Editor's biggest limitation - where desktop columns automatically stacked on mobile in an order you could not control. With the Fluid Engine, you decide exactly how every element appears on both desktop and mobile. For mobile optimization strategies, our guide to Squarespace mobile optimization covers responsive design best practices.

Building Layouts with the Fluid Engine

Hero Sections

Create dramatic hero sections by placing a full-width background image, overlaying a heading and subheading, and positioning a CTA button - all using drag-and-drop. Adjust text positioning to the left, center, or right by dragging blocks to different grid positions. Add spacing by leaving empty grid cells between elements.

Multi-Column Content

Create two, three, or four column layouts by placing blocks side by side on the grid. Unlike the Classic Editor, column widths are fully customizable - a 30/70 split, a 25/50/25 layout, or any other proportion you need. Drag block edges to adjust widths precisely.

Card Layouts

Build card-style layouts by combining image blocks, text blocks, and button blocks within defined grid areas. Each card occupies a specific set of grid cells. Add multiple cards in a row for a feature grid or service overview. For layout techniques, our guide to Squarespace custom layouts covers advanced positioning with CSS Grid and Flexbox.

Asymmetric Designs

The Fluid Engine excels at asymmetric layouts - a large image on the left with stacked text blocks on the right, a narrow sidebar next to wide content, or staggered elements that create visual movement. These layouts are impossible on the Classic Editor without extensive Custom CSS.

Fluid Engine Tips for Better Layouts

Use the grid intentionally. Align elements to consistent grid lines for a clean, organized layout. Random placement creates visual chaos - even freeform layouts should follow an underlying structure.

Leave white space. Empty grid cells are not wasted space - they create breathing room that makes content easier to read and more visually appealing. Do not fill every grid cell with content. For design principles, our Squarespace design tips guide covers whitespace and visual hierarchy.

Edit mobile separately. Always switch to the mobile editor after finalizing your desktop layout. Desktop designs rarely translate perfectly to mobile - adjust positions, sizes, and spacing for the small screen.

Use overlapping sparingly. Overlapping elements creates visual interest but becomes confusing when overused. Reserve overlapping for intentional design moments - a text overlay on a hero image, a badge overlapping a card - not as a default for every section.

Start with structure. Place your main content blocks (headings, body text, images, CTAs) first, then fine-tune their positions and sizes. Building the skeleton before the details prevents frustrating rearrangements. For broader customization, our guide to customizing your Squarespace website covers the full design workflow.

Fluid Engine vs. Classic Editor

Layout flexibility: Fluid Engine offers freeform placement and custom sizing. Classic Editor uses fixed columns.

Mobile editing: Fluid Engine has a separate mobile editor. Classic Editor generates mobile layout automatically.

Overlapping: Fluid Engine supports element layering. Classic Editor does not.

Block sizing: Fluid Engine allows any width and height. Classic Editor is limited to column fractions.

Learning curve: Fluid Engine requires more intentional placement. Classic Editor is simpler but more restrictive.

For a detailed comparison, our guide to Squarespace Fluid Engine vs Classic Editor covers every difference and when to upgrade.

Upgrading Sections to the Fluid Engine

On 7.1 sites, you can upgrade individual sections from Classic to Fluid Engine. Click on a section, look for the upgrade option in section settings, and click it. Review the converted layout - content may shift during conversion. Adjust positions and sizes as needed. You can upgrade sections one at a time without converting the entire site.

Troubleshooting Fluid Engine Issues

Blocks Not Snapping to Grid

If blocks seem to float between grid positions, zoom in to the editor for more precise placement. The grid becomes more visible and snap points more accurate at higher zoom levels.

Layout Looks Different on Published Site

The editor preview and published site should match closely, but browser-specific rendering can cause minor differences. Check the published page in multiple browsers. If significant differences appear, Custom CSS may be conflicting with the Fluid Engine layout.

Mobile Layout Not Matching Desktop

This is expected - the Fluid Engine deliberately separates desktop and mobile layouts. Switch to the mobile editor and adjust the layout for mobile screens independently. For mobile-specific fixes, our guide to Squarespace Fluid Engine on mobile covers mobile editing techniques. For grid configuration, our guide to Squarespace Fluid Engine grid size covers grid customization.

Build Pages That Match Your Exact Vision

The Fluid Engine gives you the layout control that Squarespace users have wanted for years. Freeform placement, custom sizing, element overlapping, and independent mobile editing - these capabilities transform page building from working within template constraints to building exactly what you envision.

Use the grid intentionally, leave white space, edit mobile separately, and start with structure before details. The Fluid Engine is powerful - and the best results come from using that power with design discipline.