Editorial layout
A magazine-like page with mixed columns, pull quotes, and images placed to give a story pace and personality.
See it
What it is
Editorial layout borrows the pacing of magazines: a dominant headline, mixed column widths, pull quotes, captions, and images that interrupt the regular grid. It makes a page feel composed as a story rather than assembled as a stack of interchangeable sections.
Reach for it on long-form features, annual reports, interviews, and brand stories where the reading experience matters as much as the facts. Jason Santa Maria art-directed his individual blog posts in the late 2000s and proved a web page could be composed one at a time. A strong version varies scale and placement while keeping a stable underlying grid, so the surprises still feel related.
Gotcha: print can freeze one perfect spread, but a browser cannot. Keep the DOM in reading order, then use CSS Grid to create the composition at wider sizes. Too many pull quotes, overlaps, and width changes turn the story into an obstacle course.
Ask AI for it
Build an editorial layout with CSS Grid: use a 12-column grid-template-columns foundation, set the opening headline and image to different grid-column spans, place one pull quote across the text and margin columns, and alternate full-width images with a readable 60ch article measure. Keep the HTML in reading order and collapse the composition to one column below 720px without overlaps.