Squarespace Stacks: What They Are, How They Work, and Whether You Should Use Them
Squarespace has introduced a new feature that makes designing with Fluid Engine much more flexible: Stacks.
If you’ve ever tried to arrange several blocks on a Squarespace page, you may have noticed that the editor can feel a little like arranging furniture in a room where the floor keeps moving. You place a text block beside an image, adjust the spacing, check the tablet view, and suddenly everything has shifted.
Squarespace Stacks are designed to make that process easier.
They let you group multiple blocks together so they can be moved, styled, animated, and linked as one flexible unit. For Squarespace designers, this can be a genuine game changer. But — because no website feature is perfect — Stacks also have limitations worth understanding before you start stacking everything in sight.
What Are Squarespace Stacks?
Squarespace Stacks allow you to group multiple blocks inside a Fluid Engine section.
For example, you could group:
A heading
A paragraph
A button
An image
An icon
Once grouped, those blocks become a single Stack. You can then move or style the entire group without having to select each block individually.
Stacks can be arranged vertically or horizontally, depending on the layout you want to create. You can also adjust the spacing, alignment, padding, background, border, and other design settings for the entire group.
In simple terms, a Stack helps several blocks behave more like one organized component.
Who Can Use Squarespace Stacks?
According to Squarespace, Stacks are available in:
Squarespace 7.1
Fluid Engine sections
They are not available in every Squarespace editing environment. For example, Stacks do not work in Squarespace 7.0 or the Classic Editor used in some blog and event posts.
If you’re working in Squarespace 7.1 and using Fluid Engine, you should be able to access the feature when editing a section with multiple blocks.
How to Create a Stack in Squarespace
Creating a Stack is fairly simple once you know what to look for.
Open the page you want to edit.
Click Edit.
Select the blocks you want to group.
You can drag your cursor around multiple blocks.
You can also hold Shift while selecting blocks.
Click the Stack Blocks icon in the toolbar.
Adjust the Stack’s layout and design settings.
Squarespace requires at least two blocks to create a Stack. According to Squarespace’s documentation, a single Stack can contain up to 30 blocks and can include up to three layers of nested Stacks.
That might sound like plenty — and for most standard website sections, it is. But you probably shouldn’t try to build your entire homepage inside one giant mega-Stack. That’s how the design equivalent of spaghetti begins.
What Can You Do With Squarespace Stacks?
Stacks are useful because they solve several common Fluid Engine frustrations.
Move Multiple Blocks Together
Before Stacks, moving a group of blocks could involve a lot of clicking, dragging, and hoping nothing was left behind.
With Stacks, you can move the entire group as one unit. This makes it easier to:
Reposition a content group
Move a call-to-action section
Adjust a card layout
Shift an image-and-text combination
Reorganize a page section
Once blocks are grouped, the layout becomes easier to manage.
Create More Consistent Spacing
Stacks let you control the gap between blocks inside the group.
You can choose a predefined gap or enter a custom pixel value. You can also adjust the spacing and padding around the Stack itself.
This is especially helpful if your website currently has:
Large unexplained gaps
Uneven spacing between text and buttons
Inconsistent card layouts
Sections that look different at different screen sizes
Stacks give you more control over how close or far apart the blocks appear.
Add a Background or Border to the Entire Stack
You can apply design effects to the Stack as a whole instead of building a separate background shape behind every block.
Depending on the available settings, you can add:
A background color
A background image
A border or stroke
Rounded corners
Padding
Transform effects
This is useful for creating:
Testimonial cards
Service cards
Pricing boxes
Feature sections
Callout panels
Promotional blocks
Instead of decorating each block separately, you can style the group.
Animate Multiple Blocks at Once
One of the most exciting benefits of Squarespace Stacks is the ability to animate multiple blocks together.
Before Stacks, you might have needed to apply animations one block at a time. That could make a section feel disjointed or require a lot of repetitive editing.
With a Stack, you can create a more coordinated effect. For example, a heading, paragraph, and button can enter the page together as one visual unit.
This can make a design feel more polished without requiring custom code or complicated workarounds.
Make an Entire Stack Clickable
Stacks can also include a clickthrough link.
That means you can make an entire group of blocks link to:
Another page
A file
An email address
A phone number
An external website
This is particularly helpful for service cards, blog previews, portfolio items, and promotional sections.
Instead of requiring visitors to click one specific button or image, the entire visual area can become interactive.
Of course, use this carefully. If everything on your website is clickable, visitors may start wondering what is a link and what is simply decorative. A little clarity goes a long way.
Squarespace Stacks and Responsive Design
One of the biggest advantages of Stacks is improved responsiveness.
Responsive design means your website should adapt to different screen sizes, including:
Desktop computers
Laptops
Tablets
Mobile phones
With traditional Fluid Engine layouts, blocks can sometimes move independently as the screen gets smaller. A layout that looks perfect on desktop may feel awkward on tablet or mobile.
Blocks can:
Pile on top of one another
Create large gaps
Shift out of alignment
Become difficult to read
Make buttons hard to tap
Stacks help related blocks stay together as the screen changes.
Because the blocks are grouped into a flexible layout, they can resize and rearrange more predictably across devices. This does not mean your mobile layout will be perfect automatically — you should still test it — but it gives you a much stronger starting point.
Using Mobile Overrides With Stacks
Squarespace’s mobile editing tools can also work alongside Stacks.
Mobile Overrides allow you to adjust certain layout and design settings for mobile without changing the desktop design. This gives you more control over:
Mobile spacing
Stack positioning
Background settings
Transforms
Animations
Other supported design properties
This is useful when your desktop layout looks great but your mobile layout needs a few adjustments.
For example, you might want to:
Reduce the padding around a Stack on mobile
Change the spacing between blocks
Reposition a group slightly
Adjust a mobile animation
Make a card layout more compact
The content remains synced, but the layout can be fine-tuned for smaller screens.
The Biggest Advantages of Squarespace Stacks
Here are the main benefits at a glance:
Move multiple blocks together
Create more consistent spacing
Improve responsiveness across devices
Animate several blocks as one group
Make an entire group clickable
Add backgrounds and borders to a group
Create more flexible layouts
Reduce the need for custom CSS
Make designs easier for clients to manage
Stacks also make the Fluid Engine grid feel less restrictive. Instead of placing every block according to the grid’s exact structure, you can group blocks and space them in a way that better matches your preferred design.
That extra flexibility can make a website feel more custom and less like it was assembled from a collection of rigid boxes.
The Limitations of Squarespace Stacks
Stacks are helpful, but they are not a magic wand.
Blocks Cannot Freely Overlap
One of the biggest drawbacks is that blocks inside a Stack cannot overlap freely.
This can be limiting if you want to create:
Collage-style designs
Layered image layouts
Text over images
Decorative overlapping shapes
Editorial-style compositions
Stacks are best for organized, structured layouts. They are less useful when your design depends on blocks sitting on top of one another.
If your design needs overlapping elements, you may need to use another approach, such as:
A background image
A section background
Custom CSS
Separate blocks outside the Stack
A different layout structure
You Cannot Stack Forever
Squarespace limits how many blocks and nested Stacks you can use.
The official limit is up to 30 blocks in a Stack and up to three layers of nested Stacks. Even before reaching those limits, overly complex Stacks can become difficult to edit.
Nested Stacks can be useful when you need different spacing between groups of content, but they should be used intentionally.
If your Stack starts looking like this:
Stack inside Stack
Inside another Stack
Inside a fourth mystery Stack
With one lonely button trapped somewhere inside
…it may be time to simplify.
The Layout Can Rearrange Unexpectedly
When you first create a Stack, Squarespace may immediately change the position of your blocks.
This can be surprising, especially if you spent time arranging them manually. The blocks may shift into a vertical or horizontal order based on the Stack’s settings.
If something moves unexpectedly:
Open the Stack settings.
Check the direction and alignment.
Review the gap settings.
Use the Layers panel to select individual blocks.
Rearrange blocks inside the Stack as needed.
The Layers panel can be especially helpful when you are working with nested Stacks and clicking directly on the canvas keeps selecting the outer group.
Blocks Inside a Stack Share Some Settings
Stacks are designed to control a group of blocks together. That is useful, but it can also reduce some individual control.
For example, you may want one block to have a completely different gap or position from the others. Depending on the layout, you may need to create nested Stacks to achieve different spacing.
This can be done, but it adds complexity.
When Should You Use Squarespace Stacks?
Stacks are a great choice when you want to group related content.
Use them for:
Service cards
Testimonial sections
Feature lists
Team member cards
Product highlights
Blog previews
Image-and-text groups
Promotional sections
Call-to-action areas
They are especially helpful when the blocks should:
Move together
Stay aligned
Share a background
Animate together
Link to the same destination
Maintain consistent spacing
When Should You Avoid Using Squarespace Stacks?
You may want to avoid Stacks when:
Your design depends on overlapping blocks
You need every block to have completely different spacing
You are creating an intentionally messy or collage-style composition
The section already works well across devices
The layout would become too nested or complicated
You also do not need to use Stacks simply because they exist. A simple layout is often better than a complicated one that is technically impressive but difficult to maintain.
Tips for Using Squarespace Stacks Successfully
Group Related Content
A Stack should contain blocks that belong together visually or conceptually.
For example, group:
A heading, paragraph, and button
An image, product name, and link
A testimonial quote, name, and title
Avoid grouping unrelated content just because it happens to be nearby.
Test Desktop, Tablet, and Mobile
Always check your Stack at different screen sizes.
Pay attention to:
Text wrapping
Button width
Image cropping
Spacing
Alignment
Touch targets
Overall section height
A Stack may look excellent on desktop but still need mobile adjustments.
Keep Nested Stacks Simple
Nested Stacks can help you create varied spacing, but too many layers can make the design difficult to understand.
Use them when needed, then test whether the same result can be achieved with a simpler layout.
Check Button Width
When a button is added to a Stack, Squarespace may change its sizing behavior. If the button looks too narrow or does not respond well on smaller screens, check whether it is set to Fit or Fill.
You may need to adjust the width using a percentage rather than a fixed pixel value.
Use the Layers Panel
If it becomes difficult to select an individual block, open the Layers panel.
This is particularly helpful when:
Stacks are nested
Several blocks overlap visually
The outer Stack keeps getting selected
You need to edit one specific block
Watch for the Insert Indicator
When dragging blocks into a Stack, pay attention to the visual insertion indicator. Squarespace may interpret your movement as placing a block inside another Stack rather than beside it.
A quick moment of checking can prevent an accidental nesting situation.
Are Squarespace Stacks Worth Using?
For many Squarespace 7.1 users, yes.
Stacks are a meaningful improvement to the Fluid Engine editing experience. They give designers more control over spacing, responsiveness, group animation, and clickable layouts.
They are especially valuable if you have ever struggled with:
Blocks moving unpredictably
Large gaps between elements
Repetitive animation settings
Mobile layouts falling apart
Keeping related blocks aligned
However, Stacks are not ideal for every design. If your website relies heavily on overlapping elements, collage layouts, or highly independent block positioning, you may find the limitations frustrating.
The best way to think about Stacks is this:
They are excellent for flexible, organized layouts — but not for every creative layout under the sun.
Final Thoughts on Squarespace Stacks
Squarespace Stacks are one of the more useful updates to the platform’s design system.
They make it easier to:
Group blocks
Control spacing
Improve responsive layouts
Animate multiple elements
Make entire sections clickable
Create more polished designs without custom code
They also give Squarespace websites a little more breathing room. You are not forced to treat every block like an isolated square on a rigid grid. You can create layouts that feel more intentional and better suited to the content.
There are still limits. Blocks cannot overlap freely, Stacks cannot be nested forever, and complicated layouts may take some practice to manage.
But once you understand how they work, Stacks can make Squarespace design faster, cleaner, and much more flexible.
And if your current Squarespace site feels like it is fighting you at every turn, Stacks may be the peace treaty you needed.