Content with sidebar layout
A wide main content area paired with a narrower column for navigation, filters, metadata, or other supporting material.
See it
What it is
Content with sidebar pairs a dominant main region with a narrower supporting column. The main area carries the article, results, or work; the sidebar carries navigation, filters, metadata, related links, or another aid that is useful alongside it.
Reach for it when the supporting material helps people act on the main content without deserving equal visual weight. MDN and the Stripe docs put a table of contents in the narrow column; stores put filters there. The default WordPress blog theme, with its column of recent posts, categories, and a search box, is why the shape reads as ordinary.
Gotcha: a sidebar can become a junk drawer. Give it one clear job, keep the main content first in the source when that matches the reading order, and move or collapse the sidebar before either region becomes too cramped. Sticky sidebars also need a height that fits the viewport.
Ask AI for it
Build a content-with-sidebar layout using CSS Grid with grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem) and a 3rem gap. Mark the supporting region up as an aside and make its inner panel position: sticky with top: 2rem, align-self: start, max-block-size: calc(100dvh - 4rem), and overflow: auto. Stack it after main below 800px, and do not give either column a fixed height.