FOOTER & SHELL
圣杯布局Holy Grail Layout
顶栏 + 左导航 + 主内容 + 右辅助 + 页脚的万能骨架，Web 布局史上有名字的经典结构。
效果预览
顶部导航栏
主内容区
页脚 · 状态正常
适合用在哪
信息架构清晰的 B 端系统、社区论坛、内容管理后台。
容易踩的坑
- 移动端不改网格区域，三列硬挤在 375px 宽里，正文几乎不可读。
- 侧栏、主区各自 overflow:auto，触控板滚动时容易出现滚动穿透与嵌套滚动。
- 右侧辅助栏放广告却在 DOM 中位于正文之前，读屏用户要先听完广告。
设计提示词 · Prompt
圣杯布局（Holy Grail Layout）：grid-template-columns 用「导航宽 1fr 辅助宽」三列，grid-template-rows 用「顶栏 1fr 页脚」三行，顶栏与页脚 grid-column:1/-1 横跨三列。左栏放纵向导航项（当前项用主色高亮），中栏是主内容（标题 + 若干内容块），右栏是辅助信息或广告位，底栏居中放版权或状态信息，高度 22-32px。所有区块间 gap 5-8px、统一圆角 7-8px。整块高度用 100dvh（不用 100vh，避免移动端地址栏导致溢出），中栏设 overflow:auto 独立滚动。
Holy Grail Layout: grid-template-columns uses three columns, "nav width 1fr aside width", and grid-template-rows uses three rows, "header 1fr footer"; the header and footer use grid-column:1/-1 to span all three columns. The left column holds vertical nav items (active item highlighted in the primary color), the middle column is the main content (title + several content blocks), the right column holds secondary info or an ad slot, and the bottom bar centers copyright or status info at 22-32px tall. Use a 5-8px gap between all areas and a consistent 7-8px radius. Set the overall height with 100dvh (not 100vh, to avoid overflow from the mobile address bar), and give the middle column overflow:auto for independent scrolling.
常见搭配
同一页面里经常和「圣杯布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-holy"> <div class="sh-holy__hd">顶部导航栏</div> <div class="sh-holy__nav"><i class="is-on"></i><i></i><i></i><i></i></div> <div class="sh-holy__main"><b>主内容区</b><i></i><i></i><i style="width:66%"></i><i></i><i style="width:48%"></i></div> <div class="sh-holy__aside"></div> <div class="sh-holy__ft">页脚 · 状态正常</div> </div>