Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Live Demo
Actually clickableWhat you just saw:Whether viewed on a 13-inch laptop or a 34-inch ultrawide monitor, the text and primary cards stay neatly collected within a comfortable 1200px boundary, leaving breathing room along the edges.
What it actually is
The core of a container is readability and spatial restraint. Without max-width constraints, body text stretches across thousands of pixels on ultra-wide monitors, breaking human scanning rhythm (violating the 65ch optimal line length rule). Conversely, rigid fixed pixel widths induce painful horizontal scrolling on mobile. A proper container is an adaptive safety boundary.
Anatomy · What it's made of
Max-Width最大宽度约束
Limits line length to comfortable bounds (e.g. max-w-7xl)
Margin Auto自动外边距
Centers the container horizontally across viewports
Gutter / Padding两侧防贴边安全留白
Prevents content from sticking to screen edges (px-4 to px-8)
Content Well内部正文井
Inner wrapper like max-w-prose for optimal reading line length
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Article reading, blogs, and long-form editorial content (65ch to 75ch limit) | Yes |
| SaaS landing pages and responsive card grid boundaries | Yes |
| Form submissions, settings pages, and checkout workflows | Yes |
| Full-bleed dashboards, interactive maps, or video editor timelines | No |
| Full-width banner sections (outer section bleeds edge-to-edge, inner stays centered) | Depends |
Full-screen immersive tools (maps, canvas boards, media players) where forced max-widths break immersion.
Hardcoding fixed pixel widths (e.g. width: 1200px) that cause horizontal overflow on mobile screens.
Similar Patterns
Don't mix these upContainerCurrent
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
In one line:Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Hero Section
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Split Screen
双栏分屏
Divides the screen into equal halves, balancing emotional storytelling with functional utility.
How to tell AI
Three levels of promptAdd the component name and specifics
Wrap page body in a centered container: max-width 1280px, horizontally centered with auto margins, 16px horizontal padding on mobile, 32px on desktop, with body copy capped at 65 characters per line.
Don't just say this to AI
Bad → BetterDon't say this to AI
Center the page at fixed 1200px width.
Say this instead
Use an adaptive container: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8, constrain prose to max-w-prose, and let background sections bleed edge-to-edge while keeping content centered.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.