布局模式

整页空间，究竟怎么分

八种整页结构骨架，讲清 header、sidebar、main、aside 与画布如何分区。每个标注线框都由真实 Grid 或 Flexbox 排布，并附窄屏塌缩说明、可复制 CSS 和对 AI 的准确说法。

居中单栏

Centered Column

单列阅读版心centeredreading columnarticle layout

结构线框

layout.local

页头 header

主区 main · 最大 72ch

页脚 footer

何时用

适合博客、文档正文和以连续阅读为主的营销页，让一条叙事线始终占据视觉中心。

窄屏如何塌缩

结构本来就是单列；移动端只需收窄左右页边距。

可复制 CSS

.page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.page > header,
.page > footer {
  inline-size: 100%;
}

.content {
  flex: 1;
  max-inline-size: 72ch;
  inline-size: calc(100% - 32px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .content { inline-size: calc(100% - 24px); }
}

对 AI 这样说

使用「居中单栏 / Centered Column」整页结构：header 与 footer 通栏，中间正文列限制为 72ch，并用 margin-inline: auto 居中；页面外层纵向 flex，正文区填满剩余高度，移动端只收窄左右边距。 FORBIDDEN: 把 header/footer 也锁进正文版心、让正文无限变宽、用固定像素宽度替代 max-width、在移动端保留过大的页边距。

侧栏布局

Sidebar + Content

边栏左导航sidebarnav + contentapp shell

结构线框

layout.local

侧栏 sidebar · 260px

主区 main · 1fr

何时用

适合后台、文档站和带持久主导航的应用外壳。

窄屏如何塌缩

窄屏时把侧栏收进抽屉，或改成紧凑顶栏。

可复制 CSS

.page {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-block-size: 100vh;
}

.main { min-inline-size: 0; }

@media (max-width: 768px) {
  .page { grid-template-columns: 1fr; }
  .sidebar { display: none; } /* Move it into a drawer or top bar. */
}

对 AI 这样说

使用「侧栏布局 / Sidebar + Content」整页结构：页面用两列 CSS Grid，左侧导航固定 260px，右侧 main 用 1fr 流式占满，并设置 min-inline-size: 0 防止内容撑破；窄屏把侧栏移入抽屉或顶栏。 FORBIDDEN: 用绝对定位固定侧栏、同时给主区固定宽度、让长内容撑宽网格、在手机上继续常驻 260px 侧栏。

圣杯布局

Holy Grail

三明治经典三栏holy grailheader-footer-3col

结构线框

layout.local

页头 header

导航 nav

主区 main · 1fr

辅栏 aside

页脚 footer

页头 header

导航 nav

主区 main · 1fr

辅栏 aside

页脚 footer

何时用

适合门户和经典 Web 应用：既有全局头尾，又需要次级导航与上下文侧栏。

窄屏如何塌缩

窄屏时把中间三列按 nav、main、aside 的顺序叠成单列。

可复制 CSS

.page {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  min-block-size: 100vh;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; min-inline-size: 0; }
aside { grid-area: aside; }
footer { grid-area: footer; }

@media (max-width: 768px) {
  .page {
    grid-template: auto auto 1fr auto auto / 1fr;
    grid-template-areas: "header" "nav" "main" "aside" "footer";
  }
}

对 AI 这样说

使用「圣杯布局 / Holy Grail」整页结构：CSS Grid 划分 header、nav、main、aside、footer 五个命名区域，header/footer 横跨三列，中段由自适应宽 nav、1fr 主区和自适应宽 aside 组成，页面至少占满视口；窄屏把中间三列顺序叠放。 FORBIDDEN: 用绝对定位硬摆三栏、固定像素高度、三列在窄屏不塌缩、nav/aside 抢主区宽度。

双栏分屏

Split Screen

对半分分屏split screen50/50two-pane hero

结构线框

layout.local

面板 panel · 1fr

何时用

适合登录/注册流程，以及把操作与图片或品牌色块并置的强对比落地页。

窄屏如何塌缩

窄屏时把左右面板改为上下堆叠。

可复制 CSS

.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-block-size: 100vh;
}

.panel { min-inline-size: 0; }

@media (max-width: 768px) {
  .page { grid-template-columns: 1fr; }
}

对 AI 这样说

使用「双栏分屏 / Split Screen」整页结构：页面用两列等宽 CSS Grid 并至少占满视口，一侧承载表单或核心文案，另一侧承载图片、插画或纯色品牌面；两个 panel 都允许内容收缩，窄屏上下堆叠。 FORBIDDEN: 用 absolute 把两半拼起来、两侧内容重复、为了 50/50 裁掉关键表单、在手机上仍强制并排。

三栏工作台

Three-Pane

三栏rail+list+detailIDE 布局chat 布局three-pane console

结构线框

layout.local

导轨 rail · 64px

列表 list · 320px

详情 detail · 1fr

何时用

适合聊天、邮件、IDE 和 Agent 应用，让全局导航、可浏览列表与详情同时在场；完整血肉版见「设计系统」模块 /layouts。

去设计系统查看完整工作台

窄屏如何塌缩

窄屏时折叠 rail，并让列表与详情二选一显示。

可复制 CSS

.workbench {
  display: grid;
  grid-template-columns: 64px 320px 1fr;
  block-size: 100vh;
}

.rail,
.list,
.detail { min-block-size: 0; }
.list,
.detail { overflow-y: auto; }

@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; }
  .rail { display: none; }
  .list[hidden], .detail[hidden] { display: none; }
}

对 AI 这样说

使用「三栏工作台 / Three-Pane」整页结构：CSS Grid 三列依次为 64px 图标 rail、320px 可独立滚动列表和 1fr 详情/上下文区，工作台固定为视口高度且各列 min-block-size: 0；窄屏隐藏 rail，列表与详情改成二级切换。 FORBIDDEN: 把三栏做成三个浮层、让整个页面和列表同时抢滚动、给详情列固定宽度、在窄屏把三列等比缩小后硬塞并排。

仪表盘网格

Dashboard Grid

看板卡片网格dashboardwidget gridbento admin

结构线框

layout.local

主组件 widget · 跨 2×2

组件 widget

何时用

适合分析后台、监控面板和由独立摘要组件组成的概览页。

窄屏如何塌缩

auto-fit 会自动降列；最窄屏时把主卡恢复为单格。

可复制 CSS

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.widget--primary {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 520px) {
  .widget--primary { grid-column: auto; grid-row: auto; }
}

对 AI 这样说

使用「仪表盘网格 / Dashboard Grid」整页结构：内容区用 auto-fit + minmax(220px, 1fr) 生成自适应卡片网格，间距 16px；一个主 widget 横跨两列两行，其余指标卡自动补位，最窄屏把主卡恢复为单格。 FORBIDDEN: 为每个断点手写固定列数、让所有卡同等强调、用绝对定位填洞、在单列屏保留 span 2 导致溢出。

列表详情

List-Detail

主从master-detail收件箱布局inboxlist + pane

结构线框

layout.local

列表 list · 340px

详情 detail · 1fr

何时用

适合邮件、设置、消息，以及任何“选一项看详情”的工作流。

窄屏如何塌缩

窄屏时把列表与详情作为两级页面，通过路由切换，不压缩成两列。

可复制 CSS

.view {
  display: grid;
  grid-template-columns: 340px 1fr;
  block-size: 100vh;
}

.list {
  min-block-size: 0;
  overflow-y: auto;
}

.detail { min-inline-size: 0; }

@media (max-width: 768px) {
  .view { display: block; }
  /* Navigate between list and detail as two route states. */
}

对 AI 这样说

使用「列表详情 / List-Detail」整页结构：CSS Grid 左侧 340px 列表独立纵向滚动，右侧 1fr 详情面板承载选中项内容，整体占满视口高度；窄屏将列表与详情改成两个路由层级。 FORBIDDEN: 让列表与整页形成双重滚动、把详情也设成固定宽度、选择项后仍在手机上挤出两列、依赖 hover 才能进入详情。

全屏画布

Full Canvas

画布无限画布canvasfloating panelsdesign tool shell

结构线框

layout.local

画布 canvas · inset 0

工具条 toolbar

属性栏 inspector · 280px

何时用

适合设计工具、地图、白板和节点编辑器，让工作画布成为主角，控制面板覆盖其上。

窄屏如何塌缩

窄屏时把悬浮侧面板收成底部抽屉。

可复制 CSS

.canvas-shell {
  position: relative;
  block-size: 100vh;
  overflow: hidden;
}

.canvas { position: absolute; inset: 0; }
.toolbar { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; }
.inspector { position: absolute; inset-block: 16px; inset-inline-end: 16px; inline-size: 280px; }

@media (max-width: 768px) {
  .inspector {
    inset: auto 12px 12px;
    inline-size: auto;
  }
}

对 AI 这样说

使用「全屏画布 / Full Canvas」整页结构：外壳 position: relative、占满视口并裁掉溢出，工作画布 absolute inset: 0 全铺；工具条悬浮左上，约 280px 属性面板停靠右侧，覆盖层保持明确层级；窄屏把属性面板收成底部抽屉。 FORBIDDEN: 用普通文档流挤压画布、让页面本身滚动、每个控制都散成独立浮窗、在手机上保留遮住大半画布的右侧面板。