布局模式 · 整体框架
单栏布局
Single Column Layout
也叫：单列布局、居中单栏、一栏式布局、One Column
页面只有一条居中的内容主列，所有区块从上往下依次排列，没有侧边栏，常用于手机端和结构简单的页面。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发页面用单栏布局：所有内容放在一列里，最大宽度 720px、水平居中，两侧留白；区块从上到下依次是标题、说明文字、主体内容、底部操作按钮，区块之间间距 24px。不要加侧边栏；手机上这一列占满宽度，左右留 16px 内边距。
发给
01判断
你的内容是这样吗？
对照两列，确认单栏布局是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
桌面端不设最大宽度，文字一行横跨整个屏幕，读起来很累
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
把导航、筛选、推荐等辅助内容全堆进主列，页面拉得特别长
- 03
各区块宽度不一致，有的占满、有的居中，左边缘对不齐
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
一条限定最大宽度、水平居中的内容主列；页头、各内容区块、页脚全部沿这一列从上到下堆叠。
组成部分点一下，在上面的线框里标出来
识别特征
- 1内容集中在屏幕中间的一列，左右两侧是大片留白
- 2所有区块左右边缘对齐，从上往下排列
- 3没有侧边栏，也没有并排的多栏
04解释
详细解释
单栏布局是最简单的页面结构：整个页面只有一列内容，标题、说明、主体、按钮都在这一列里从上到下排。桌面端通常给这一列设一个最大宽度（比如 720px 或 960px）并水平居中，两边留白。
它的好处是阅读路线只有一条，用户不会被左右两侧的东西分散注意力；它也天然适配手机屏幕，几乎不需要额外的响应式改造。
缺点是横向空间利用率低。如果页面既有导航、筛选，又有辅助信息，全塞进一列会让页面变得很长，这时应该考虑「侧边导航+内容」或「圣杯布局」。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-single-column- DOM 选择器
- 没有专门的选择器，靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
single-columnone-columnnarrow-layoutcentered-layoutcontent-narrow
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30