前端老鸟复盘：CSS Grid 布局从入门到实战

大家好，我是一名拥有 14 年前端开发经验的老程序员，从 IE6 兼容时代一路走到现在，见证了 CSS 布局从浮动、定位到 Flexbox，再到 Grid 的完整进化。今天我想把自己多年踩坑、实战总结的CSS Grid 完全教程分享出来，不讲虚的，全是能直接落地的干货，适合前端新手入门，也适合老前端查漏补缺。

CSS Grid 是目前 CSS 体系中最强大、最现代化的二维布局系统，它彻底解决了传统布局的痛点，让复杂页面排版变得简单高效。很多同行觉得 Grid 难学，其实是没摸透它的核心思维模型，一旦理解通透，你会彻底抛弃浮动、繁琐的 Flex 嵌套，甚至会感慨：以前做布局怎么那么费劲？

一、先搞懂：Grid 到底是什么？和 Flexbox 有啥区别？

在正式上手代码前，先把核心概念掰扯清楚，避免学完就忘。

1.1 Grid 的核心定位

Flexbox 是一维布局，只能控制一行或一列的排列，适合导航栏、按钮组、单行列表这类单轴布局；而 Grid 是二维布局，同时控制行和列，能精准定义整个页面的网格结构，适合后台管理系统、电商首页、杂志排版、图片画廊等复杂布局。

简单总结：Grid 管宏观页面布局，Flexbox 管微观组件排版，两者不是替代关系，而是黄金搭档。

1.2 Grid 布局的核心组成

任何 Grid 布局都离不开 6 个基础概念，这是理解 Grid 的钥匙：

1. Grid 容器（Container） ：父元素设置display: grid，就变成了网格容器，所有布局规则都写在这；
2. Grid 项目（Item） ：容器的直接子元素，只有直接子元素能参与网格布局，孙子元素不受影响；
3. Grid 轨道（Track） ：网格的行和列，就是我们定义的横向 / 纵向排版轨道；
4. Grid 网格线（Line） ：轨道之间的分隔线，从 1 开始编号，支持负索引（从末尾数）；
5. Grid 单元格（Cell） ：行和列交叉形成的最小区域，是项目的默认占位空间；
6. Grid 区域（Area） ：给多个单元格命名，形成一个矩形区域，方便复杂布局快速排版。

这 6 个概念不用死记硬背，跟着案例写两遍，自然就理解了。

二、从零搭建网格：容器核心属性详解

搭建 Grid 布局分两步：先定义容器的网格结构，再控制项目的位置和对齐。我们先从容器属性入手，这是 Grid 的核心。

2.1 开启网格：display: grid

这是 Grid 布局的入口，给父元素设置后，直接子元素自动变成网格项目：

css

.container {
  display: grid; /* 块级网格容器，独占一行 */
  /* display: inline-grid; 行内网格容器，不独占一行 */
}

2.2 定义行列：grid-template-columns /grid-template-rows

这两个属性是 Grid 的灵魂，用来定义列宽和行高，支持 4 种单位：

• 固定单位：px、rem、em；
• 百分比：%；
• fr 单位：Grid 专属，代表剩余空间的分数，最常用；
• auto：自动适配内容宽度 / 高度。

基础用法

css

.container {
  display: grid;
  /* 定义3列，每列宽度相等 */
  grid-template-columns: 1fr 1fr 1fr;
  /* 简写：repeat(重复次数, 尺寸) */
  grid-template-columns: repeat(3, 1fr);
  
  /* 混合布局：固定侧边栏 + 自适应内容 + 固定侧边栏 */
  grid-template-columns: 200px 1fr 200px;
  
  /* 定义2行：第一行自适应内容，第二行固定100px */
  grid-template-rows: auto 100px;
}

神级函数：minmax ()

minmax(最小值, 最大值)能让轨道自适应，既不会太小挤爆内容，也不会太大浪费空间：

css

/* 行高最小120px，最大自适应内容 */
grid-template-rows: minmax(120px, auto);

2.3 网格间距：gap

以前用grid-gap，现在统一用gap，设置行、列之间的间距，不用再算 margin：

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* 行、列间距统一24px */
  /* 单独设置 */
  row-gap: 16px;
  column-gap: 24px;
}

2.4 响应式神器：auto-fill /auto-fit

不用写媒体查询，就能实现自适应网格，这是 Grid 最香的功能之一：

css

/* 自动填充列，每列最小200px，最大1fr */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 自动适配列，折叠空轨道，让内容铺满 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

区别：

• auto-fill：尽可能多创建列，哪怕没有内容，会留空白；
• auto-fit：折叠空白列，让现有列撑满容器，实际开发优先用 auto-fit。

三、精准控制：网格项目的定位属性

容器搭好网格后，就可以控制项目在网格中的位置，支持按网格线定位、跨轨道定位、命名区域定位。

3.1 按网格线定位：grid-column /grid-row

网格线从 1 开始编号，负号代表从末尾数，比如-1是最后一条网格线：

css

.item {
  /* 列：从第1条线到第3条线，跨2列 */
  grid-column: 1 / 3;
  /* 简写：span 跨列数 */
  grid-column: 1 / span 2;
  /* 全屏宽度：从第一条到最后一条 */
  grid-column: 1 / -1;
  
  /* 行：从第1条线到第3条线，跨2行 */
  grid-row: 1 / 3;
}

3.2 简写定位：grid-area

这是行起始 / 列起始 / 行结束 / 列结束的简写，一行代码搞定定位：

css

.item {
  /* 行1-3，列1-4，跨2行3列 */
  grid-area: 1 / 1 / 3 / 4;
}

3.3 命名区域：grid-template-areas

复杂布局用这个，可读性拉满，写代码像拼图一样简单：

css

/* 容器定义区域名称 */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  /* 定义区域，每行一个字符串，.代表空白 */
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  min-height: 100vh;
  gap: 16px;
}

/* 项目绑定区域 */
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: content; }
aside { grid-area: aside; }
footer { grid-area: footer; }

这种写法特别适合后台首页、移动端适配，改区域名称就能重新排版，维护成本极低。

四、对齐与分布：让布局更规整

Grid 的对齐属性分容器级和项目级，覆盖水平、垂直两个方向，彻底告别 margin:auto 居中。

4.1 容器级对齐（控制所有项目）

1. 单元格内对齐：

   • justify-items：水平方向（左、中、右、拉伸）；
   • align-items：垂直方向（上、中、下、拉伸）；
   • place-items：简写，place-items: 垂直 水平。

css

.container {
  /* 所有项目在单元格内水平垂直居中 */
  place-items: center;
}

2. 网格整体对齐：当网格总宽度 / 高度小于容器时，控制整个网格的分布：

• justify-content：水平分布；
• align-content：垂直分布；
• 可选值：start、end、center、space-between、space-around、space-evenly。

4.2 项目级对齐（控制单个项目）

单独给某个项目设置对齐，优先级高于容器：

css

.item {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
  place-self: center; /* 简写 */
}

五、自动布局：不用定位，自动排版

如果不给项目设置定位，Grid 会自动按顺序排列，用grid-auto-flow控制排列方向：

css

.container {
  grid-auto-flow: row; /* 默认：先行后列 */
  grid-auto-flow: column; /* 先列后行 */
  grid-auto-flow: row dense; /* 紧凑模式，填充空白间隙 */
}

dense 关键字是瀑布流布局的神器，能把小项目塞进空白处，避免布局留白。

同时可以用grid-auto-rows/grid-auto-columns设置隐式轨道的尺寸：

css

.container {
  grid-template-columns: repeat(3, 1fr);
  /* 自动生成的行，最小100px，最大自适应 */
  grid-auto-rows: minmax(100px, auto);
}

六、实战案例：5 个高频布局直接复制用

讲了这么多属性，直接上实战案例，都是工作中天天用的布局，复制就能跑。

6.1 无媒体查询响应式卡片网格

电商、博客列表必备，自适应列数，不用写媒体查询：

css

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

6.2 全页面后台布局

侧边栏 + 顶部栏 + 内容区，移动端自动折叠：

css

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
}
.sidebar { grid-area: sidebar; }
.topbar { grid-area: topbar; }
.content { grid-area: content; }

/* 移动端适配 */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 64px auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "content";
  }
}

6.3 杂志排版布局

图文混排，主次分明：

css

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.featured-article {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}
.secondary-article {
  grid-column: 4 / 7;
}

6.4 带特色图的图片画廊

首图放大，其余均匀排列：

css

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}
.gallery-item:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

6.5 全屏单个元素居中

登录页、空状态页必备，一行代码搞定：

css

.page {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

七、进阶特性：Subgrid 子网格

CSS Grid Level2 的新特性，目前所有现代浏览器都支持，解决嵌套网格对齐问题：子网格可以继承父网格的轨道尺寸，让嵌套元素和父网格完美对齐：

css

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.child {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* 继承父级列轨道 */
}

八、老鸟建议：Grid vs Flexbox 怎么选？

14 年开发经验总结，别纠结，按场景选：

• 用 Grid：需要同时控制行和列、页面整体布局、多列对齐、图片画廊、杂志排版；
• 用 Flexbox：单行导航、按钮组、垂直列表、组件内部微调；
• 最佳实践：页面骨架用 Grid，组件内部用 Flex，效率翻倍。

九、快速速查表（收藏备用）

容器属性

• display: grid / inline-grid：开启网格
• grid-template-columns/rows：定义行列
• grid-template-areas：命名区域
• gap/row-gap/column-gap：间距
• grid-auto-flow：自动布局方向
• grid-auto-rows/columns：隐式轨道
• justify-items/align-items/place-items：项目对齐
• justify-content/align-content/place-content：网格分布

项目属性

• grid-column/grid-row：行列定位
• grid-area：定位 / 区域绑定
• justify-self/align-self/place-self：单个项目对齐

实用函数

• repeat(次数, 尺寸)
• minmax(最小, 最大)
• auto-fill / auto-fit

十、写在最后

作为一名从浮动兼容一路走过来的前端，我真心建议大家尽早吃透 Grid，它不是可选技能，而是前端必备核心能力。现在的前端开发，复杂布局用 Grid、简单组件用 Flex，代码量减少一半，维护成本大幅降低。

这篇教程是我 14 年实战经验的浓缩，没有多余的理论，全是工作中能直接用的干货。建议大家收藏起来，跟着代码敲一遍，很快就能掌握 Grid 的精髓。

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、关注，后续我会分享更多前端实战技巧和老鸟踩坑经验！