Layouts · Page frame
Single Column Layout
Also called: One-column layout, Single column, Centered layout, Narrow layout
The page has one centered main column. All sections stack from top to bottom with no sidebar. Common on mobile and on pages with a simple structure.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstUse a single column layout for this page. Put all content in one column, max width 720px, centered horizontally, with empty space on both sides. Stack the sections from top to bottom: title, description text, main content, action buttons at the bottom, with 24px between sections. Don't add a sidebar. On mobile, the column takes the full width with 16px padding on the left and right.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Single Column Layout is what you need.
Use Single Column Layout when
- The page has one main thread and the sections are read in order
- Users mostly browse on phones, where screen width is limited
- There isn't much content and no need for persistent navigation or a side info panel
- You want users to focus on one task without distractions around it
Pick something else when
The page needs persistent multi-level navigation and users switch between modules often
Use insteadSidebar LayoutUsers need to look at a list and a detail side by side, or compare two blocks on one screen
A large screen needs to show several groups of metrics or lots of data at once
Use insteadData Table
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
No max width on desktop, so a line of text stretches across the whole screen and is tiring to read
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Navigation, filters, recommendations and other side content all piled into the main column, making the page very long
- 03
Sections have different widths (some full width, some centered), so their left edges don't line up
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
One centered main column with a max width. The header, content sections and footer all stack down this column from top to bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A single column layout is the simplest page structure. The whole page is one column of content, and the title, intro, main content and buttons all stack in it from top to bottom. On desktop, this column usually gets a max width (like 720px or 960px) and is centered horizontally, with empty space on both sides.
The upside is that there's only one reading path, so users aren't distracted by things on the left or right. It also fits phone screens naturally and needs almost no extra responsive work.
The downside is that it doesn't use horizontal space well. If the page has navigation, filters and side info, cramming everything into one column makes the page very long. In that case, consider a Sidebar Layout or a Holy Grail Layout.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-single-column- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026