前端Wiki/CSS/深入/Grid 网格布局

实战页面骨架

综合运用 Grid 与 Flex 搭一个经典「圣杯」页面骨架：顶部通栏导航、中间侧栏 + 内容区、底部页脚。骨架用 Grid 的 areas 一笔画出，导航内部再用 Flex 摆放 logo 和链接——两种布局各司其职。

实践中的三个要点：

给整个页面设 min-height: 100vh，让 footer 始终贴底，即使内容很少。
行高定义 auto 1fr auto：头尾由内容决定，中间 1fr 吃掉剩余高度。
侧栏在窄屏下想隐藏或换位，只需在媒体查询里改写 grid-template-areas 字符串，一行搞定重排。

本节要点页面骨架 = Grid areas 一笔画；min-height:100vh + auto 1fr auto 实现 footer 贴底；骨架用 Grid、组件内部用 Flex。

CSS

<style>
  body { margin: 0; }
  .shell {
    display: grid;
    min-height: 100vh;      /* 撑满整屏 */
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 160px 1fr;
    grid-template-areas:
      "top    top"
      "side   content"
      "foot   foot";
  }
  .top  { grid-area: top; background: #263238; color:#fff; padding: 12px; }
  .side { grid-area: side; background: #eceff1; padding: 12px; }
  .main { grid-area: content; padding: 16px; }
  .foot { grid-area: foot; background: #37474f; color:#fff; padding: 8px; }
</style>
<div class="shell">
  <header class="top">顶部导航</header>
  <aside class="side">侧边栏</aside>
  <main class="main">内容区，随窗口自动变高</main>
  <footer class="foot">页脚</footer>
</div>

🔗 相关词条flex grid 媒体查询组件

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读