CSS 如何实现圣杯布局？

Question

CSS 如何实现圣杯布局？

仓乃文 · Accepted Answer

圣杯布局是经典的三栏布局：头部、底部、中间三列（两侧固定宽度、中间自适应），通过 CSS Grid 可以极简实现。

```css
.holy-grail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }
```

Flexbox 方案：
```css
.holy-grail-flex {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-body nav { width: 200px; }
.holy-grail-body main { flex: 1; }
.holy-grail-body aside { width: 200px; }
```

补充说明：
- Grid 方案通过 grid-template-areas 直观定义布局区域
- min-height: 100vh 确保 footer 在内容不足时也置底
- Flexbox 方案需要嵌套容器，但兼容性更好
- 响应式：小屏幕改为单列布局，调整 grid-template-areas