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

grid 区域布局

grid-template-areas 允许给网格区域起名字，然后用字符串「画」出布局：

每行字符串是一行网格，格子之间空格分隔；
相同的名字自动连成一个区域，项目用 grid-area: 名字 对号入座；
不想放东西的格子用点号 . 占位。

它的杀手级优势是改布局不用改 HTML：把 header 行的三个格子改成两个，或者把 aside 挪到右边，只动 CSS 字符串就能重排整个页面，响应式换布局也因此变得极其简单。

注意每行字符串里的格子数必须相等，否则整条规则失效。

本节要点grid-template-areas 用字符串画布局、grid-area 报名字入座；点号占空格；改布局只改 CSS，响应式重排神器。

CSS

<style>
  .page {
    display: grid;
    grid-template-areas:
      "header header header"
      "side   main   main"
      "footer footer footer";
    grid-template-rows: 50px 1fr 40px;
    grid-template-columns: 120px 1fr 1fr;
    gap: 8px; min-height: 200px;
  }
  .page > div { background: #d1c4e9; padding: 8px; }
  .hd  { grid-area: header; }
  .sd  { grid-area: side; }
  .mn  { grid-area: main; }
  .ft  { grid-area: footer; }
</style>
<div class="page">
  <div class="hd">头部</div>
  <div class="sd">侧栏</div>
  <div class="mn">主内容</div>
  <div class="ft">底部</div>
</div>

🔗 相关词条HTML grid CSS 网格布局

📚 推荐阅读

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

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

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

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

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

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