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.
One primary reading area, one supporting rail.
- 01Primary column
The wider region carries the article, results, or main task.
- 02Supporting rail
Filters, related information, or an index stay secondary.
- 03Shared navigation
A common header keeps both columns within one page context.
How the pattern works
A two-column layout gives the main task more space while keeping useful context nearby. An article and its contents index, a product list and its filters, or documentation and a related-links rail can all use the same underlying structure.
The columns have different jobs. Start by deciding what someone came to do, then put supporting information in the smaller column. The exact ratio follows the content; two-thirds and one-third is a starting point, not a rule.
Where it fits—and what to consider
A useful choice when
- One task clearly takes priority.
- Supporting information is useful during that task.
- The main content needs a comfortable reading width.
Be deliberate about
- A crowded sidebar can compete with the primary task.
- A sticky rail needs room below the site header and a sensible height.
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
Keep the main column wider. Let long text shrink safely with minmax(0, …), and use a consistent gap between the two regions.
On narrower screens
Stack the main content and supporting material in a deliberate source order. Move essential filters before results; related reading can follow the article.
Build the structure
- 01Identify the primary task and separate supporting content.
- 02Create a two-track grid only when both columns have enough room.
- 03Choose the mobile source order before adding sticky positioning.
.layout {
display: grid;
gap: 2rem;
}
@media (min-width: 64rem) {
.layout {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}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
Sketch an article with an author bio and a contents index. Decide which supporting element should appear before the article on a small screen, and explain why.
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.