How to Change Blog Layout in Squarespace

How to Change the Blog Collection Page Layout

Accessing Blog Layout Settings

Go to your Pages panel, find your blog page, and click the gear icon to open blog settings. Under "Blog Page Layout" or "Design" (depending on your version), you will find layout options that control how posts are displayed in the collection view - the page that lists all your blog posts.

Layout Options

Grid layout: Posts display in a multi-column grid with featured images, titles, and excerpts. Best for visual blogs where featured images drive click-through. Configure the number of columns (typically 2 to 4) and the amount of metadata shown (date, author, category, excerpt).

List layout: Posts display in a single-column list with featured images beside or above the title and excerpt. Best for text-heavy blogs where the content title and excerpt are more important than the featured image.

Side-by-side layout: Featured image on one side, text on the other. Creates a magazine-style blog page. Works well for blogs with consistent, high-quality featured images.

Single column: Full-width posts stacked vertically. Each post takes the full page width. Best for blogs with few posts or where each post needs maximum visual impact in the listing.

Configuring Post Metadata

In the blog layout settings, choose which metadata to display: post date, author name, category, read time, and excerpt. Showing fewer metadata elements creates a cleaner layout. Showing more elements helps visitors filter and choose which posts to read. For design strategies, our Squarespace design tips guide covers content hierarchy and visual balance.

Customizing Individual Blog Post Layout

Post Content Width

Individual blog posts use your template's default content width. If the text feels too wide (lines are hard to read) or too narrow (content feels cramped), adjust the content width in Site Styles or add Custom CSS: .blog-item-content-wrapper { max-width: 700px; margin: 0 auto; }. Optimal reading width is 600 to 800 pixels for body text.

Featured Image Display

Configure how the featured image appears on individual posts - full-width banner above the title, inline with the content, or hidden on the post page (shown only in the collection listing). This is set in the blog page settings under the individual post layout options.

Post Navigation

Squarespace can display previous/next post links at the bottom of each post to keep readers browsing your blog. Enable this in the blog settings. These navigation links reduce bounce rate by giving readers an immediate next step after finishing a post.

Customizing Blog Layout with CSS

Custom Grid Spacing

Override the default grid gap between posts with Custom CSS: .blog-collection .blog-item { margin-bottom: 40px; }. Increase for more breathing room between posts. Decrease for a denser grid. For CSS techniques, our guide to adding custom CSS to Squarespace covers blog-specific selectors.

Custom Featured Image Aspect Ratio

Force all featured images to the same aspect ratio in the grid for a clean, consistent layout: .blog-collection .blog-item img { aspect-ratio: 16/9; object-fit: cover; }. This prevents images of different sizes from creating an uneven grid.

Hiding Blog Metadata

If the blog settings do not let you hide specific metadata elements, use CSS: .blog-item .blog-meta-item--date { display: none; }. Target specific metadata elements (date, author, category) individually.

Custom Blog Sidebar

Squarespace does not include a native blog sidebar on all templates. To create a sidebar layout, use the Fluid Engine (7.1) to place a narrow content column beside the blog content area, or use CSS Grid to create a two-column layout with a main content area and a sidebar. For layout techniques, our guide to Squarespace custom layouts covers multi-column structures.

Blog Layout for Different Content Types

Photography/Visual Blogs

Use a grid layout with large featured images, minimal text overlay, and 2 to 3 columns. Let the images do the talking. Hide excerpts and show only titles. Use consistent image aspect ratios for a clean grid.

Business/Marketing Blogs

Use a list or side-by-side layout that emphasizes titles and excerpts. Show category tags to help readers filter by topic. Include author names for multi-author blogs. Display read time to set expectations.

Personal/Journal Blogs

Use a single-column layout that feels intimate and focused. Show dates prominently. Include longer excerpts that give readers a preview of your writing style. Feature images are optional - the text is the draw.

News/Magazine Blogs

Use a mixed layout - a large featured post at the top followed by a grid of recent posts below. This requires Custom CSS or the Fluid Engine to create the mixed layout. Feature your most important post prominently while still showing recent content. For content strategy, our Squarespace SEO guide covers blog content optimization for search.

Blog Layout Best Practices

Use consistent featured images. All featured images should have the same aspect ratio and similar visual quality. Inconsistent images make the blog grid look unprofessional regardless of the layout configuration.

Show enough posts per page. Configure the number of posts displayed before pagination. Too few (3 to 5) means excessive pagination. Too many (50+) means slow page loading. 9 to 15 posts per page is optimal for most blogs.

Make titles compelling. In grid and list layouts, the title is what drives clicks. Write titles that clearly communicate the value of reading the post. Vague titles get skipped regardless of how good the layout looks.

Test on mobile. Blog layouts that look great on desktop may not translate well to mobile. Grid layouts collapse to single-column on phones. Verify the mobile blog experience works well - titles are readable, images are not oversized, and posts are easy to tap. For mobile optimization, our guide to Squarespace mobile optimization covers responsive blog layout.

Add categories and tags. Organized blog content is easier for visitors to browse. Add categories for broad topics and tags for specific subjects. Display category navigation on the blog page to help visitors filter by interest. For broader site organization, our guide to customizing your Squarespace website covers content structure and navigation.

Build a Blog Layout That Serves Your Content

Your blog layout should match your content type, guide visitors to your best posts, and look clean on every device. Start with the built-in layout options - grid, list, side-by-side, or single-column - and use Custom CSS to refine spacing, image handling, and metadata display.

Use consistent featured images, write compelling titles, and test on mobile. A well-configured blog layout turns casual browsers into engaged readers.