CSS Grid 是现代 CSS 中最强大的二维布局系统，它可以同时控制行与列的排列方式。相比传统的 Flexbox 一维布局，Grid 能够更直观地实现复杂的页面结构。本文将从基础概念出发，系统讲解 CSS Grid 的核心特性与实战技巧。

一、Grid 容器基础

创建 Grid 布局的第一步是将父元素设置为 Grid 容器。通过 display: grid 声明后，所有直接子元素自动成为 Grid 项目。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

上面的代码定义了一个三列两行的网格。grid-template-columns 指定列的宽度，grid-template-rows 指定行的高度。gap 属性统一设置行间距和列间距，也可以分别用 row-gap 和 column-gap 精细控制。

二、fr 单位与灵活尺寸

fr（fraction）是 Grid 特有的弹性长度单位，表示可用空间的一个等份。它让列和行能够按比例分配剩余空间。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列按 1:2:1 分配 */
  gap: 20px;
}

/* 与固定单位混合使用 */
.sidebar-layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* 侧栏固定，主内容自适应 */
  gap: 24px;
}

fr 单位计算的是扣除固定尺寸和间距之后的剩余空间。例如 200px 1fr 2fr 中，1fr 和 2fr 将平分扣除 200px 以及 gap 之后的空间，比例为 1:2。

三、grid-template-areas 与 grid-area

Grid 最直观的特性之一是通过命名区域来定义布局。使用 grid-template-areas 可以像画地图一样描述页面结构。

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: 64px 1fr 48px;
  gap: 16px;
  min-height: 100vh;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

当某个区域需要留空时，使用点号 . 表示。这种方式的可读性极高，后续维护时一眼就能看出整体布局结构。响应式调整时只需修改 grid-template-areas 的定义即可。

四、对齐控制

Grid 提供了六个对齐属性，分为容器级别和项目级别两类：

常用值包括 start、end、center、stretch。默认情况下项目会拉伸填满格子，设置为 center 则居中显示。

五、auto-fill 与 auto-fit 响应式布局

结合 repeat()、minmax() 和 auto-fill / auto-fit，可以在不写媒体查询的情况下实现响应式网格。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* auto-fit 会在项目较少时让列自动扩展 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

auto-fill 会生成尽可能多的列轨道，即使某些列是空的；而 auto-fit 会将空列折叠为 0 宽度，让已有项目自动拉伸填满。在卡片列表、图片画廊等场景中，这一技巧非常实用。

六、实战：经典后台管理布局

以下是一个后台管理系统常见的经典布局方案，结合了固定侧栏、顶栏以及主内容区域自适应的特性：

.admin-layout {
  display: grid;
  grid-template:
    "header header" 56px
    "nav    main"   1fr
    / 220px 1fr;
  gap: 0;
  height: 100vh;
}

.admin-header { grid-area: header; }
.admin-nav    { grid-area: nav; overflow-y: auto; }
.admin-main   { grid-area: main; overflow-y: auto; padding: 24px; }

/* 移动端切换为单列 */
@media (max-width: 768px) {
  .admin-layout {
    grid-template:
      "header" 56px
      "main"   1fr
      / 1fr;
  }
  .admin-nav { display: none; }
}

总结

CSS Grid 与 Flexbox 并非互斥关系：Grid 擅长处理页面级别的二维结构，Flexbox 适合一维的组件内部排列。在实际开发中，通常用 Grid 搭建整体页面骨架，再用 Flexbox 处理导航栏、按钮组等线性布局。掌握这两者的配合使用，就能高效应对几乎所有前端布局需求。