If you've searched for “Squarespace blog sidebar” you already know the bad news: Squarespace 7.1 removed sidebars entirely. The old 7.0 templates like Brine and Bedford had built-in sidebar support, but every 7.1 template forces a single-column blog layout with no native option to change it.
This is one of the most requested features in the Squarespace forums, and it's been ignored for years. The workaround is CSS Grid. It's clean, it's reliable, and it replaces the $59/year sidebar plugins that do the same thing with worse performance. Here's exactly how to do it.
Why Squarespace 7.1 Removed Sidebars
Squarespace made the switch to a “sections” model in 7.1. Instead of page-level layouts with sidebars, headers, and footers baked in, every page is now a vertical stack of full-width sections. This simplified their editor but killed sidebar layouts.
The problem is that sidebars are genuinely useful for blogs. They let you show recent posts, categories, newsletter signups, or author bios alongside your content. Removing them hurt engagement metrics for content-heavy sites.
The CSS Grid Approach
The technique uses CSS Grid to split your blog section into two columns: a main content area and a sidebar. You'll need to structure your Squarespace page with two sections side by side, then use Code Injection to apply the grid layout.
The key selector is .blog-item-wrapperfor the blog feed, and you'll target the parent section to create the grid container.
/* Create a two-column blog layout */
.blog-item-wrapper {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
align-items: start;
}
/* Sidebar column */
.blog-item-wrapper .sqs-layout:last-child {
position: sticky;
top: 100px;
}
/* Stack to single column on mobile */
@media screen and (max-width: 768px) {
.blog-item-wrapper {
grid-template-columns: 1fr;
}
}The grid-template-columns: 1fr 300px creates a fluid main column and a fixed 300px sidebar. The 1fr unit takes up all remaining space, so the content area adapts to any screen width.
Making the Sidebar Sticky
A sidebar that scrolls away with the page defeats the purpose. You want it to stick to the viewport as the reader scrolls through your blog post. The CSS position: sticky property handles this natively without JavaScript.
/* Sticky sidebar with scroll boundary */
.sidebar-section {
position: sticky;
top: 100px; /* offset below sticky header */
max-height: calc(100vh - 120px);
overflow-y: auto;
}
/* Prevent sticky behavior from breaking on iOS */
.sidebar-section {
-webkit-overflow-scrolling: touch;
}Set the top value to match your header height plus some breathing room. If your Squarespace header is 80px tall, use top: 100px to keep 20px of space between the header and the sidebar.
The max-height with overflow-y: auto prevents long sidebars from extending past the viewport. If your sidebar content is taller than the screen, it becomes independently scrollable.
Handling Mobile Responsively
A two-column layout on a phone is unreadable. The @mediaquery at 768px switches back to a single column, stacking the sidebar below the main content. This is the standard breakpoint where Squarespace's own templates switch to mobile layout.
You can also hide the sidebar entirely on mobile if the content is redundant. A newsletter signup might make sense in the sidebar on desktop but feel intrusive on mobile where it pushes your blog content further down the page.
/* Hide sidebar entirely on mobile */
@media screen and (max-width: 768px) {
.sidebar-section {
display: none;
}
}
/* Or move it below content with spacing */
@media screen and (max-width: 768px) {
.sidebar-section {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}
}Writing all this CSS by hand means getting the selectors right for your specific template, handling edge cases for sticky positioning, and testing across breakpoints. Our sidebar generator builds the complete code for you based on your layout preferences.
The sidebar approach works on every Squarespace 7.1 template because it targets universal layout selectors. No plugins, no monthly fees, and no performance penalty from loading third-party scripts. Just CSS that does what Squarespace should have built in from the start.
