What is a grid chapters section?
Grid chapters is an editorial layout for a story told in a few numbered parts. The section is built on a twelve-column skeleton: each chapter takes a row of three, six and three columns with a hairline rule under it, and the centre cell carries two vertical hairlines that run the whole way down. The chapter’s text — a small label (the chapter word, its number and a one-word kicker) over a short headline — sits centred between those lines, and a tall 3:4 photo fills one of the outer cells, bleeding out to the page edge. Odd chapters put the photo on the right, even ones on the left, so the eye zig-zags down the page.
It reads like the opening spread of a magazine feature or a lookbook: calm, typographic, with the photos doing the talking. Nothing pins or takes over the screen; the chapters scroll past like ordinary content, which is what makes the one piece of motion — the headline swapping in the centre — feel so deliberate.
When to use it
- A brand story in parts — origin, craft, people, place.
- A process — three to five stages, each with one strong picture.
- Seasons, collections, editions — the editorial table of contents of a lookbook.
- A long-form feature — chapter openers that give a long read its rhythm.
- An about page — values or milestones that deserve more than a bullet list.
How it works
Each chapter is written inside its own row, which is exactly the layout phones get: the text block, then the photo, one after the other. On a desktop the script lifts every chapter’s text out of its row into a sticky slot in the centre column. The slot stays level with the middle of the viewport, and only one chapter’s text is visible in it at a time; the others wait just outside a mask above or below.
As the reader scrolls, the script watches where each row’s top edge is. When the next row’s top crosses the centre line, the current label and headline slide up through their masks and the next pair rises in from below, headline first and label a beat later — the same easing and timing as the reference. Scrolling back reverses the direction, and the swap-back point sits a little lower than the swap point, so hovering around a boundary never makes the text flicker.
Meanwhile every photo is drawn slightly larger than its frame and drifts vertically as it crosses the screen — a small parallax whose strength varies from photo to photo, so the page never feels mechanical. Readers who prefer reduced motion get the layout with no drift and instant swaps.
Best practices
- Three to five chapters — enough for a rhythm, few enough that each photo stays a moment.
- Use portrait photos, or ones that survive a tall 3:4 crop with the subject in the middle.
- Keep headlines to one line of thought (about eight words) — they are set large and centred.
- Make the kicker a single word: it follows the chapter number on one short line.
- Change the label word to suit the story — “Part”, “Step”, “Act” — or clear it and keep just the number.
How to make one — free
Edit the chapters above
Set each chapter’s headline, kicker and photo — upload your own.Pick the feel
The label word, numbers on or off, the image drift, colours.Embed or download
Copy the embed code or save the self-contained HTML file — or build a whole story in Scrollytelling.
Templates that use a grid chapters
Want a head start? These ready-made, fully-editable templates put the grid chapters to work — customize one and publish in minutes.
Grid chapters — frequently asked questions
Is the grid chapters widget free?
Yes — customize and export it here with no account.
Does it work on phones?
Yes. Under tablet width the rows go single-column — the chapter text, then its photo — the side hairlines drop away and the photos keep a gentler drift.
How many chapters can I add?
Up to eight; three to five reads best, since every chapter is a tall photo on its own row.
Can I change the “Chapter” word?
Yes — type any word in the Label word field, or clear it to show only the number and the kicker. The numbers can be hidden too.