Squarespace Fluid Engine Grid Size

Fluid Engine Grid Structure

12-Column Grid

The Fluid Engine uses a 12-column grid. This is a standard web design grid that divides the section width into 12 equal columns. Blocks span one or more columns - a full-width element spans all 12, a half-width element spans 6, a third-width spans 4. The 12-column system is divisible by 2, 3, 4, and 6, making it flexible for virtually any layout proportion.

Row Height

Rows in the Fluid Engine have a base height that determines the vertical grid increment. When you add content to a section, rows are added automatically to accommodate the content. Blocks snap to row boundaries vertically, which means you cannot position elements at arbitrary pixel heights - they align to the nearest row line.

Grid Gaps

The space between grid columns (gutter) and rows (row gap) affects how closely blocks can be positioned next to each other. The Fluid Engine has default gap values that create consistent spacing. You cannot change the grid gap through the visual editor, but Custom CSS can override the gap values for specific sections.

Content Width

The grid exists within the section's content width, which is controlled by the section settings. A section set to "Inset" has a narrower content area (the grid is smaller). A section set to "Full" has a wider content area (the grid stretches further). The 12 columns always fill the available content width, regardless of the section width setting.

How Grid Size Affects Layout

Column Width at Different Screen Sizes

Because the 12 columns fill the section's content width, column width changes with screen size. On a 1440-pixel desktop monitor with a 1200-pixel content width, each column is approximately 100 pixels wide. On a 768-pixel tablet, each column is approximately 64 pixels wide. On mobile, the grid collapses to a simplified layout edited through the mobile editor.

Minimum Block Size

The smallest a block can be is one column wide and one row tall. This defines the finest granularity of your layout. If one column width is 100 pixels on desktop, that is the smallest increment you can work with in the visual editor. For positioning finer than one grid unit, Custom CSS provides pixel-level control. For CSS positioning, our guide to adding custom CSS to Squarespace covers precision layout techniques.

Block Spanning

Blocks can span any number of columns from 1 to 12 and any number of rows. A hero heading might span 8 columns. A sidebar element might span 3 columns. A full-width image spans all 12. The ability to span custom column counts is what makes the Fluid Engine more flexible than the Classic Editor's fixed column options.

Working with the Grid for Precise Layouts

Using Grid Lines for Alignment

When you drag blocks in the Fluid Engine, grid lines appear showing where the block will snap. Use these lines to align elements across columns - a heading that starts at column 2 should align with body text that also starts at column 2. Consistent alignment creates professional-looking layouts. Misaligned elements (one starting at column 2, another at column 3) create visual disorder.

Creating Equal-Width Columns

For two equal columns, each spans 6 of the 12 grid columns. For three equal columns, each spans 4. For four equal columns, each spans 3. Place blocks at these column boundaries for perfectly equal divisions. The math is simple: 12 divided by your number of columns equals the span for each.

Creating Unequal Columns

The 12-column grid makes unequal splits easy: 4/8 (one-third/two-thirds), 3/9 (quarter/three-quarters), 5/7, or any other combination that adds to 12. Position and resize blocks to the appropriate column counts. Unequal layouts create visual hierarchy - the wider column draws more attention.

Vertical Spacing Control

Control vertical spacing by leaving empty rows between blocks. One empty row creates tight spacing. Two or three empty rows create more generous spacing. For precise vertical spacing beyond what the row grid allows, use Custom CSS margin or padding on specific blocks.

Customizing Grid Behavior with CSS

Overriding Grid Gaps

If the default grid gap is too wide or too narrow for your design, override it with Custom CSS targeting the section's grid container. Reduce the gap for a tighter layout or increase it for more breathing room between elements.

Precise Positioning Beyond the Grid

For element positioning that does not align with grid lines - like a logo offset by 20 pixels from the grid, or a decorative element positioned at an exact pixel coordinate - use Custom CSS with margin, transform, or position properties. The Fluid Engine handles the macro layout; CSS handles the micro adjustments. For layout techniques, our guide to Squarespace custom layouts covers CSS Grid and Flexbox for fine-grained control.

Responsive Grid Behavior

The Fluid Engine grid adapts to screen width automatically - columns get narrower on smaller screens. The mobile editor provides a separate grid for phone layouts. For tablet-specific adjustments that fall between desktop and mobile, use CSS media queries targeting the tablet breakpoint (768px to 1024px). For responsive techniques, our guide to responsive design on Squarespace covers breakpoints and fluid layouts.

Grid Size and Different Content Types

Text Blocks

Text blocks should span enough columns for comfortable line length - typically 6 to 8 columns for body text on desktop. Text that stretches across all 12 columns creates lines that are too long to read comfortably. Constrain text width for better readability.

Image Blocks

Image blocks can span any number of columns and rows. The image scales to fill the block. For consistent image grids (like a portfolio), make all image blocks the same column span and row span. For hero images, span all 12 columns and multiple rows for a dramatic full-width display.

Button Blocks

Buttons typically span 2 to 4 columns on desktop and full width (all columns) on mobile. A button that spans too many desktop columns looks oversized. A button that spans too few is hard to notice. For button sizing, our guide to changing button colors in Squarespace covers responsive button CSS.

Common Grid Sizing Mistakes

Not aligning to consistent grid lines. Blocks that start at different column positions without design intent create a sloppy layout. Pick a starting column (2, 3, or 4 from the left edge) and align all your main content blocks to it.

Making text blocks full width. Body text that spans all 12 columns creates excessively long lines that are hard to read. Limit text blocks to 6 to 8 columns and center them or align them to one side.

Ignoring the mobile grid. The desktop grid does not translate to mobile. Switch to the mobile editor and adjust block sizes for the narrow mobile viewport. For mobile best practices, our guide to Squarespace Fluid Engine mobile covers mobile-specific editing.

Fighting the grid with CSS. If you find yourself writing extensive positioning CSS, you may be trying to achieve a layout the Fluid Engine can handle natively. Check whether the visual editor can produce what you need before reaching for code. For design strategies, our Squarespace design tips guide covers layout principles that work with the grid system.

Master the Grid, Master Your Layouts

The Fluid Engine grid is the structure behind every layout you build on Squarespace. Understanding its 12-column system, row behavior, and responsive scaling lets you build pages with professional precision - not approximate drag-and-drop guesswork.

Use the grid lines for alignment. Use column math for proportional layouts. Use the mobile editor for small-screen optimization. And use Custom CSS for the pixel-level adjustments the grid cannot achieve on its own.