搭骨架
居中窄栏布局
Centered Column Layout
「中间一条窄内容栏」「博客正文布局」「居中单栏页面」「阅读页布局」
LIVE DEMO真实可交互，动手试试
为什么设计师总把 hero 叫成 banner？
因为很多团队是从广告图、运营图的习惯叫法延续过来的，但在页面结构里它更接近首屏区块。
建议同时写：Hero / 首屏 / 主视觉区
- 英文名
- Centered Column Layout
- 别名 · 俗称
- 居中单栏窄内容栏布局博客正文布局
- Web 叫法
- Centered Column Layout
- 大白话定义
- 限制正文最大宽度并让内容栏水平居中的结构，适合文章、协议页和表单页，让阅读更稳定。
- 部位拆解
- 内容栏 Column受最大宽度限制的主栏
- 左右留白 Gutter在大屏上保留呼吸感
- 阅读节奏 Rhythm通过行宽和间距降低阅读疲劳
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
做一个居中窄栏布局（Centered Column Layout）：正文最大宽度 720px，标题、段落、表单都居中对齐，保证长文阅读舒适
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的居中窄栏布局（Centered Column Layout）。逐一排除：正文宽度过宽；小屏左右 padding 不够；标题和正文没有对齐；表单按钮超出内容栏。症状是：