Squarespace 7.1 doesn't include a built-in grid/list toggle for blog pages. You can add one by injecting a toggle button via code injection and using CSS classes to swap between layouts.
The JavaScript adds a click handler that toggles a class on the blog list wrapper. The CSS then switches between a multi-column grid and a single-column list view based on that class.
/* Add via Code Injection > Footer */
/* <button id="view-toggle" class="view-toggle">Grid View</button> */
.blog-list--grid .summary-item {
display: inline-block;
width: 48%;
vertical-align: top;
margin-bottom: 30px;
}
.blog-list--list .summary-item {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.blog-list--list .summary-thumbnail {
width: 200px;
flex-shrink: 0;
}Enhance your blog with our Blog Sidebar toolTry it free →
