CSS Grid 实战布局完全指南

学会 CSS Grid 二维布局，轻松实现任何复杂页面结构。 · 难度：入门 · +15XP

Flexbox vs Grid：什么时候用哪个？

记住一句话：Flexbox 是一维布局（要么管行，要么管列），Grid 是二维布局（同时管行和列）。

打个比方：Flexbox 像排队——你可以让队伍横着排或竖着排，但只能选一个方向。Grid 像棋盘——你可以同时控制每一行和每一列。

场景	推荐
导航栏、按钮组、卡片内元素排列	Flexbox ✅
页面整体布局（头/内容/尾）	Grid ✅
照片墙、商品网格	Grid ✅
表单行、列表项	Flexbox ✅
复杂仪表盘、后台布局	Grid ✅

第一步：定义网格

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cell {
  background: #3b82f6;
  color: white;
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  font-size: 1.5rem;
}
</style>

效果：6 个格子自动排列成 3 列 × 2 行，间距 16px。repeat(3, 1fr) 表示"每列等宽，共 3 列"。fr（fraction）是 Grid 专属单位，代表"一份可用空间"。

Grid 核心属性速查

属性	作用	示例
grid-template-columns	定义列宽	200px 1fr 200px（三栏，两侧固定中间自适应）
grid-template-rows	定义行高	auto 1fr auto（头部/内容/底部）
gap	行列间距	16px 或 16px 24px（行距 列距）
grid-template-areas	命名区域布局	见下方示例

实战：经典页面布局

用 Grid 实现"头-侧边栏-内容-尾"布局，只需几行代码：

<div style="display: grid; grid-template-areas:
  'header header'
  'sidebar main'
  'footer footer';
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;">
  <header style="grid-area: header; background: #1e293b; color: white; padding: 1rem;">头部</header>
  <aside style="grid-area: sidebar; background: #f1f5f9; padding: 1rem;">侧边栏</aside>
  <main style="grid-area: main; padding: 1rem;">主内容区</main>
  <footer style="grid-area: footer; background: #1e293b; color: white; padding: 1rem;">底部</footer>
</div>

grid-template-areas 简直是 CSS 布局史上最直观的写法——你在 CSS 里"画"出页面的 ASCII 结构图，浏览器就按你的"画"渲染！

auto-fit / auto-fill：响应式网格

这是 Grid 最强大但最少人知道的功能——不写媒体查询就能做响应式：

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

auto-fit 会自动计算每行能放下多少列。屏幕宽就多放几列，屏幕窄就少放。每个卡片最小 280px，多余空间平均分配。

对比一下你以前写响应式的方法：

传统方式	Grid auto-fit
需要写多个 @media 断点	一行 CSS 搞定
列数是硬编码的	列数自动适应容器宽度
改断点要改多处	改 minmax 值即可

子元素定位：grid-column / grid-row

你可以让某个元素跨越多列或多行：

.featured {
  grid-column: span 2;  /* 跨 2 列 */
  grid-row: span 2;     /* 跨 2 行 */
}

这在做"首条突出显示"的新闻列表或图片墙时非常有用。

动手试试

1. 基础练习：用 Grid 做一个 4 列照片墙，每个格子放一个带边框的方块，间距 12px
2. 进阶应用：用 grid-template-areas 做一个后台管理布局——左侧导航 200px，顶部工具栏 60px，主内容区自适应，底栏 40px
3. 项目实战：把你项目中任意一个列表页（课程列表/商品列表）改成 Grid + auto-fit 响应式布局，看在不同屏幕宽度下的表现

接下来学什么？

Flexbox 和 Grid 都掌握了，下一课学习 CSS 响应式设计——如何结合媒体查询、容器查询和弹性单位，让你的页面从手机到超大屏都完美呈现。

📖 译自 MDN Web Docs CSS Grid Layout (CC-BY-SA 2.5)，有改编和扩充。