Blog Grid with Sticky Featured Post

Code Toolkit
Written By Squarestylist Support

What You'll Create

A blog list layout with a featured sticky post on the left that spans the full height, while remaining posts stack in a bordered grid on the right.

The Problem It Solves

Standard blog grids treat all posts equally. This technique highlights your most recent or featured post prominently while keeping other posts accessible in a compact, organized format.

Perfect For

News blogs, Magazine layouts, Featured content sites, Editorial pages, Content-heavy blogs.

What Makes This Different

CSS Grid creates a two-column layout where the first post is sticky and full-height. Borders and metadata positioning create a newspaper-style aesthetic. Responsive mobile layout stacks all posts vertically.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: Blog page with Basic Grid layout

  • Toolkit Title: Blog Grid List

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Text Toggles in List Sections
Next

Stacked Side Tabs from List Sections