CSS Grid 布局完全指南：通过案例掌握二维布局

本文将通过多个实用案例，帮助你快速掌握 CSS Grid 布局的核心概念和应用技巧。

一、基础网格布局

CSS Grid 是一个二维布局系统，可以同时控制行和列，比 Flexbox 的一维布局更强大。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等宽列 */
  grid-template-rows: 100px 200px;       /* 2行：100px和200px */
  gap: 10px;                             /* 单元格间距 */
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

二、响应式卡片网格

使用 auto-fill 和 minmax() 创建自适应布局：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 200px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 1rem;
}

三、网站经典布局

使用命名区域实现圣杯布局（Header、Sidebar、Main、Footer）：

.container {
  display: grid;
  grid-template: 
    "header header header" 80px
    "sidebar main aside" 1fr
    "footer footer footer" 60px / 
    200px 1fr 150px;
  min-height: 100vh;
}

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

四、瀑布流布局

实现 Pinterest 风格的瀑布流：

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  gap: 1rem;
}

.item {
  grid-row-end: span var(--row-span); /* 通过CSS变量控制跨度 */
  background-color: #f1f1f1;
  border-radius: 4px;
  padding: 1rem;
}

/* 通过CSS变量控制每个项目高度 */
.item:nth-child(1) { --row-span: 4; }
.item:nth-child(2) { --row-span: 6; }
.item:nth-child(3) { --row-span: 3; }
/* 更多项目... */

好的，CSS Grid 的功能远不止基础的网格布局，它还能轻松实现许多令人惊艳的复杂效果。除了先前提到的案例，这里再补充几个实用且强大的案例，供你参考和尝试：

五、嵌套网格与 Subgrid 实现精密对齐

场景：当网格布局内部存在嵌套结构，并且你希望子网格能完美继承父网格的轨道尺寸以实现精密对齐时，subgrid 价值巨大。

代码示例：

<div class="parent-grid">
  <div class="child-subgrid">
    <div class="child-item">A</div>
    <div class="child-item">B</div>
    <div class="child-item">C</div>
  </div>
</div>

.parent-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* 父网格定义为9列 */
  gap: 20px;
}

.child-subgrid {
  grid-column: 2 / 7; /* 子网格容器跨越父网格的第2至第7列 */
  display: grid;
  grid-template-columns: subgrid; /* 关键：继承父网格这5列的轨道尺寸 */
  gap: 15px; /* 可以自定义子网格的间隙 */
}

.child-item {
  grid-column: 2 / 4; /* 子网格项在继承的轨道内定位 */
  background-color: #f5f5f5;
  padding: 1rem;
}

效果与要点：此例中，.child-subgrid 通过 grid-template-columns: subgrid; 继承了父网格相应区域的列轨道定义（共5列）。这使得其内部的 .child-item 可以基于父网格的列线进行精确定位，实现了跨层级的对齐，尤其适用于仪表盘、数据表格等需要严格对齐的组件。请注意 subgrid 的浏览器支持度（Chrome 118+、Firefox 71+、Safari 16.5+）。

六、结合 Grid 与 Masonry 的瀑布流布局

场景：展示高度不一的图片或卡片，并希望实现错落有致、自动填充空白区域的瀑布流（Pinterest 风格）效果。

代码示例：

<div class="masonry-grid">
  <div class="masonry-item">...</div>
  <div class="masonry-item wide-item">...</div> <!-- 一个跨两列的项目 -->
  <div class="masonry-item">...</div>
  <!-- 更多项目 -->
</div>

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列宽 */
  grid-auto-rows: 200px; /* 设置默认行高 */
  grid-auto-flow: dense; /* 关键：启用密集填充模式，尽可能填充空白区域 */
  gap: 1rem;
}

.masonry-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  /* 可添加其他样式 */
}

.wide-item {
  grid-column: span 2; /* 某些项目可以跨越多列 */
}

.tall-item {
  grid-row: span 2; /* 某些项目可以跨越多行 */
}

效果与要点：通过 grid-auto-flow: dense，浏览器会尝试自动填充布局中较早出现的空白空间，从而实现类似瀑布流的效果。你可以通过给特定项目添加 .wide-item 或 .tall-item 类来控制其跨越的列数或行数，使布局更具动态性。注意：CSS 原生的 grid-template-rows: masonry; 仍在开发中。

七、高度自适应的卡片组件内部布局

场景：卡片的内部内容区域高度不一，但希望确保卡片的操作按钮始终对齐底部。

代码示例：

<div class="card-grid">
  <div class="card">
    <div class="card-title">卡片标题</div>
    <div class="card-content">这里是可变长度的内容...</div>
    <div class="card-actions">
      <button>确定</button>
      <button>取消</button>
    </div>
  </div>
  <!-- 更多卡片 -->
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 卡片外部网格 */
  gap: 2rem;
}

.card {
  display: grid; /* 卡片本身也是一个网格容器 */
  grid-template-rows: auto 1fr auto; /* 关键：三行 - 标题(自适应)、内容(占满剩余空间)、按钮(自适应) */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  height: 250px; /* 可固定高度，也可由内容撑开 */
}

.card-title {
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.card-content {
  padding: 0 1rem;
  /* 内容区域会自动伸缩 */
}

.card-actions {
  padding: 1rem;
  background: #f5f5f5;
  display: flex; /* 内部按钮可用 Flex 布局 */
  justify-content: flex-end;
  gap: 0.5rem;
}

效果与要点：此案例展示了 Grid 的嵌套使用。外部 .card-grid 控制卡片的整体排列，内部每个 .card 也成为一个网格容器。通过 grid-template-rows: auto 1fr auto;，无论中间内容区域如何变化，标题栏和按钮栏都会保持自身高度，内容区域则会灵活伸缩占满可用空间，从而确保所有卡片的按钮始终底部对齐。

八、网格对齐技巧

精确控制网格内容对齐方式：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  
  /* 单元格内项目对齐 */
  justify-items: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  
  /* 整个网格在容器中对齐 */
  justify-content: space-between;
  align-content: space-around;
  
  height: 300px;
  border: 1px solid #ccc;
}

九、实用属性速查表

属性	说明	示例
grid-template-columns	定义列宽	1fr 2fr 1fr
grid-template-rows	定义行高	100px auto
gap	设置间距	10px 20px
grid-column	跨列范围	1 / 3
grid-row	跨行范围	span 2
grid-area	命名区域	header
justify-items	水平对齐项目	center
align-items	垂直对齐项目	stretch

十、浏览器支持与渐进增强

CSS Grid 已被所有现代浏览器广泛支持（覆盖率超过97%）。对于旧版浏览器，可以使用特性查询提供降级方案：

/* 降级方案：使用Flexbox */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* 现代浏览器使用Grid */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

总结

CSS Grid 布局提供了强大的二维布局能力，适合构建从简单卡片到复杂仪表盘的各种界面。通过结合 fr 单位、minmax() 函数和命名区域等功能，可以创建出灵活且响应式的布局系统。

实践中，建议将 Grid 用于宏观页面布局，而使用 Flexbox 处理微观组件内的排列，两者结合可以获得最佳效果。