Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Give one story priority, then organize supporting stories around it.
- 01Lead story
The largest region establishes the main editorial priority.
- 02Secondary stories
Smaller features offer useful alternative entry points.
- 03Briefs
Compact links add breadth while keeping the hierarchy clear.
How the pattern works
A magazine layout uses editorial hierarchy to make a collection feel curated. A lead story has more visual weight than secondary stories, and short briefs provide additional entry points without competing with the lead.
The hierarchy comes from the content decision before it comes from the grid. Decide which story deserves prominence, then express that choice with area, image size, typography, and position. A page of equally sized columns does not communicate the same editorial judgment.
Where it fits—and what to consider
A useful choice when
- Several stories need to be introduced at once.
- Editors can identify a clear lead and supporting priorities.
- Readers arrive with a range of interests.
Be deliberate about
- Too many large headlines can erase the intended hierarchy.
- Visual placement should not create a confusing document order.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Use a larger grid area for the lead, smaller regions for secondary stories, and a consistent rhythm for briefs.
On narrower screens
Place the lead first, followed by supporting stories and briefs. Preserve differences in hierarchy without keeping a complicated multi-column arrangement.
Build the structure
- 01Choose a lead story and rank the supporting content.
- 02Assign grid areas that express those priorities.
- 03Keep the same editorial order when the grid becomes one column.
.stories { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
.stories {
grid-template-columns: 2fr 1fr;
grid-template-areas: "lead secondary" "lead briefs";
}
.lead { grid-area: lead; }
.secondary { grid-area: secondary; }
.briefs { grid-area: briefs; }
}Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Take five article titles and choose a lead, two secondary stories, and two briefs. Sketch desktop and mobile versions using the same editorial order.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.