CSS Grid 布局：2026 完全指南

CSS Grid 是 CSS 有史以来最强大的布局系统。它可以同时控制行和列，让复杂布局变得异常简单。

基本设置

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 3 列 */
  grid-template-rows: auto;
  gap: 24px;
}

定义列和行

grid-template-columns

/* 固定宽度 */
grid-template-columns: 200px 200px 200px;

/* 分数单位 — 划分剩余空间 */
grid-template-columns: 1fr 2fr 1fr;  /* 25% 50% 25% */

/* 混合 */
grid-template-columns: 250px 1fr;    /* 侧边栏 + 主内容 */

/* 重复 */
grid-template-columns: repeat(3, 1fr);         /* 3 等列 */
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 等列，无溢出 */

/* auto-fill：尽可能多的列 */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

/* auto-fit：相同但折叠空列 */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

minmax() 函数

/* minmax(min, max)：列至少 min，至多 max */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* 创建尽可能多的 250px+ 列，它们会增长以填充空间 */

命名网格线

.container {
  grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end footer-start] 60px [footer-end];
}

.sidebar { grid-column: sidebar-start / sidebar-end; }
.main    { grid-column: main-start / main-end; }

Grid Template Areas — 最易读的布局

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

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

放置项目

按线编号

.item {
  grid-column: 1 / 3;    /* 从列线 1 到 3（跨越 2 列） */
  grid-row: 1 / 2;       /* 仅第一行 */
  
  /* 简写 */
  grid-column: 1 / span 2; /* 从 1 开始，跨越 2 列 */
  grid-column: span 3;      /* 从当前位置跨越 3 列 */
  
  /* -1 = 最后一条线 */
  grid-column: 1 / -1;     /* 全宽 */
}

自动放置

.container {
  grid-auto-flow: row;    /* 默认：填充行 */
  grid-auto-flow: column; /* 填充列 */
  grid-auto-flow: dense;  /* 填充空洞（回填） */
}

对齐

/* 容器 — 对齐网格轨道 */
.container {
  justify-content: start | center | end | space-between | space-around | space-evenly;
  align-content: start | center | end | space-between | space-around | space-evenly;
  place-content: center; /* 简写：align-content justify-content */
}

/* 容器 — 对齐单元格内的项目 */
.container {
  justify-items: start | center | end | stretch;
  align-items:   start | center | end | stretch;
  place-items: center; /* 简写 */
}

/* 单个项目 */
.item {
  justify-self: start | center | end | stretch;
  align-self:   start | center | end | stretch;
  place-self: center end; /* align-self justify-self */
}

真实布局示例

响应式卡片网格

/* 卡片自动从 1→2→3→4 列重新排列 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

圣杯布局

.app {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .app {
    grid-template-areas:
      "header  header"
      "sidebar main  "
      "footer  footer";
    grid-template-columns: 260px 1fr;
  }
}

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

仪表盘网格

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 24px;
}

.stats-row  { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chart-main { grid-column: span 8; }
.chart-side { grid-column: span 4; }
.table      { grid-column: span 12; }

瀑布流风格网格（CSS Grid）

/* CSS Grid 可以近似实现瀑布流 */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* 小行单位 */
  gap: 16px 16px;
}

/* 需要 JS 根据内容高度设置 grid-row-end */
.masonry-item {
  grid-row-end: span var(--span); /* 通过 JS 设置 */
}

Grid 与 Flexbox 决策

使用 Grid 当：
✓ 需要二维布局（行和列）
✓ 整体页面结构
✓ 复杂重叠元素
✓ 精确放置很重要
✓ 跨行一致列对齐

使用 Flexbox 当：
✓ 一维布局（单行或单列）
✓ 组件级布局（导航项、按钮组）
✓ 内容决定间距
✓ 动态数量的项目

调试 CSS Grid

Chrome 和 Firefox 开发者工具拥有出色的 Grid 可视化工具：

• 右键点击元素 → 检查 → 查找 "grid" 徽章
• 点击徽章显示带有线编号和区域名称的网格覆盖层
• 在 Chrome 中使用 "布局" 面板切换网格覆盖层

→ 使用 CSS 单位转换器 转换 px、rem、em 等 CSS 单位。