如果说 Flexbox 解决的是一维排列，那么 CSS Grid 解决的就是二维布局。企业官网常见的"顶部导航 + 左侧栏 + 主内容 + 右侧推荐 + 页脚"结构，用 Grid 几行代码就能精确划分，无需嵌套多层 div。本篇带你系统理解 Grid 的轨道、区域与响应式写法。

一、Grid 与 Flexbox 的定位差异

Flexbox 是一维的，一次只控制一个方向（行或列）；Grid 是二维的，能同时控制行和列。这决定了它们的使用场景：组件内部的一行按钮、一条导航用 Flex；而整页骨架、需要行列对齐的复杂区域用 Grid。

打个比方，Flexbox 像"流水线"，元素一个个排过去；Grid 像"棋盘"，你可以精确指定每个元素落在第几行第几列。在尧图建站的项目里，我们通常用 Grid 搭页面主框架，用 Flex 处理组件内排列，两者配合覆盖 95% 以上的布局需求。

二、定义网格轨道与区域

开启 Grid 只需 display: grid。真正强大的是 grid-template-columns 和 grid-template-rows，它们定义网格的轨道。最实用的单位是 fr（fraction，比例单位），它按比例分配剩余空间，比百分比更智能。

.layout {
  display: grid;
  /* 三列：侧栏 240px / 主区域自适应 / 推荐栏 300px */
  grid-template-columns: 240px 1fr 300px;
  /* 行：头部 80px / 主体自适应 / 页脚 100px */
  grid-template-rows: 80px 1fr 100px;
  gap: 20px;
  min-height: 100vh;
}

更直观的写法是"区域命名"（grid-template-areas）。你用字符串"画"出布局图，再把元素映射到对应区域，代码即设计稿，可读性极强，后期调整结构只需改字符串。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 80px 1fr 100px;
  grid-template-areas:
    "header header header"
    "side   main   rec"
    "footer footer footer";
  gap: 20px;
}
.header { grid-area: header; }
.side   { grid-area: side; }
.main   { grid-area: main; }
.rec    { grid-area: rec; }
.footer { grid-area: footer; }

三、实战：响应式企业官网主布局

Grid 的响应式可以非常优雅。借助 auto-fit 与 minmax()，能让卡片网格在任何宽度下自动排列，无需写一堆媒体查询。repeat(auto-fit, minmax(260px, 1fr)) 的含义是："每列最小 260px、最大等分，能放几列放几列"。

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

对于整体页面框架的响应式，则用媒体查询切换 grid-template-areas。桌面端三列，平板端两列（隐藏推荐栏），手机端单列堆叠，只需改一处定义即可。

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .side, .rec { display: none; }
}

掌握 Grid 后你会发现，很多过去需要框架栅格系统才能实现的复杂布局，现在原生 CSS 几行就能搞定。建议从"区域命名"入手，先把企业官网的主框架用 Grid 重写一遍，体会二维布局的简洁与精确。