CSS Grid布局完全指南

在现代 Web 前端开发领域，页面布局始终是绕不开的核心课题。长久以来，开发者依靠 float 浮动、position 定位、Flexbox 弹性布局完成页面排版。

Flexbox 作为一维布局方案，擅长处理单行或者单列的内容排布，在横向对齐、均分空间等场景表现优异。但面对同时控制行与列的二维复杂布局——例如多列卡片网格、不规则混排模块、复杂后台仪表盘、杂志式图文排版时，Flexbox 会显得力不从心，需要大量嵌套容器、计算百分比宽度、书写冗余 hack 代码来实现效果，代码可读性差，维护成本居高不下。

CSS Grid（网格布局）是 W3C 标准化的原生二维布局系统，专门用来同时处理行和列，完美弥补 Flexbox 在二维场景的短板。它把页面划分为由行（row）、列（column）构成的网格轨道，我们可以把元素放置在网格任意单元格内，轻松实现过去需要大量 CSS、JS 才能完成的复杂排版。截至目前，主流浏览器 Chrome、Firefox、Safari、Edge 全部完整支持 Grid，生产环境已经可以放心落地使用。

本文将结合 10 个实战案例，完整拆解 Grid 容器属性、Grid 项目属性，对比 Flexbox 的适用边界，讲解响应式网格实现技巧、常见踩坑点，带你彻底吃透 Grid 布局，让页面结构开发更加灵活优雅，给响应式开发带来质的提升。

学习 Grid 第一步，先理清这套布局体系的基础名词，分清容器（Grid Container）和项目（Grid Item），这是后续所有属性的基础。下面 7 张卡片本身就是用 repeat(auto-fit, minmax()) 排列的（案例①同款写法）：

容器属性写在父容器上，用来定义整个网格的行列结构、间隙、对齐方式。

2.1 grid-template-columns / grid-template-rows

定义网格的列、行轨道大小。

.container {
  display: grid;
  /* 创建3列，宽度分别 200px 1fr 2fr */
  grid-template-columns: 200px 1fr 2fr;
  /* 创建2行，高度 120px auto */
  grid-template-rows: 120px auto;
}

repeat() 重复函数

当需要批量创建相同规格轨道，不需要重复书写，使用 repeat(重复次数, 轨道尺寸)。

/* 生成4列，每一列1fr */
grid-template-columns: repeat(4, 1fr);

auto-fill / auto-fit —— 响应式网格核心

• auto-fill：尽可能多生成轨道，填满容器宽度，轨道会保留占位空间；
• auto-fit：自动合并多余空轨道，把现有轨道拉伸填满容器，做自适应卡片列表优先选 auto-fit。

搭配 minmax() 实现不写媒体查询的响应式网格，经典万能写法：

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

minmax(min, max)

定义轨道尺寸范围，轨道尺寸不会小于最小值，也不会大于最大值。minmax(200px, 1fr) 代表轨道最小 200px，最大占用 1 份剩余空间。

2.2 gap 间隙属性

.container{
  row-gap: 20px;    /* 行与行之间间距 */
  column-gap: 16px; /* 列与列之间间距 */
  gap: 20px 16px;   /* 简写：行间隙 列间隙 */
  gap: 20px;        /* 行列间隙统一20px */
}

2.3 grid-template-areas 命名网格区域

给网格单元格划分命名区域，配合项目属性 grid-area，像画图一样写布局，非常适合页面整体大框架布局（头部、侧边栏、主内容、底部）。

.container{
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 80px 1fr 60px;
  /* 定义区域：三行，每行两个区域名称 */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

引号内每一组代表一行，同名区域代表单元格合并；不需要使用的区域用 . 点占位。

2.4 对齐属性：容器内全部项目对齐

Grid 两套对齐轴：

• 块轴：行方向、垂直方向对齐，属性 align-items；
• 内联轴：列方向、水平方向对齐，属性 justify-items。

简写：place-items: align-items justify-items。可选值：

• stretch（默认）：项目拉伸填满单元格；
• start：对齐单元格起始边缘；
• end：对齐单元格结束边缘；
• center：单元格居中。

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

place-content 是 align-content justify-content 简写。可选值：start end center space-around space-between space-evenly stretch。

.container{
  display: grid;
  width: 1200px;
  grid-template-columns: repeat(3, 200px);
  justify-content: center; /* 网格整体在容器水平方向居中 */
}

2.5 grid-auto-columns / grid-auto-rows 隐式轨道

当网格项目数量超出我们定义好的行列，浏览器会自动生成隐式网格轨道。我们可以控制这些自动生成轨道的尺寸。

.container{
  display: grid;
  grid-template-rows: 100px; /* 只定义1行 */
  grid-auto-rows: 80px;      /* 多出的自动行高度统一80px */
}

2.6 grid-auto-flow 自动放置规则

控制多余项目自动填充网格的顺序。

• row 默认：优先按行填充；
• column：优先按列填充；
• row dense / column dense：密集模式，自动填充空白格子，会打乱 DOM 顺序，谨慎使用。

2.7 grid 综合简写属性

grid 可以一次性简写 grid-template-rows / columns / areas、grid-auto-rows / columns、grid-auto-flow。可读性差，业务开发不推荐大量使用简写，优先分开书写便于维护。

项目属性写在子元素上，控制单个网格项目：跨越单元格、定位网格线、单独修改对齐方式。

3.1 grid-column-start / end，grid-row-start / end

通过网格线编号控制项目占据哪几条网格线，实现跨列、跨行。

• grid-column-start：列起始网格线；grid-column-end：列结束网格线；
• grid-row-start：行起始网格线；grid-row-end：行结束网格线。

关键字 span N：代表跨越 N 个轨道。

.item{
  /* 列方向，从第1条网格线，跨2个单元格（占2列） */
  grid-column-start: 1;
  grid-column-end: span 2;
}

简写：grid-column: start / end、grid-row: start / end

.item{
  grid-column: 1 / span 2;
  grid-row: 2 / 4;
}

3.2 grid-area

双重作用：既可以搭配 grid-template-areas 使用区域名称；也可以简写网格线定位：grid-area: row-start / column-start / row-end / column-end

3.3 justify-self / align-self / place-self

单独修改某一个项目在单元格内部对齐，会覆盖容器设置的 justify-items / align-items。可选值：start end center stretch

.item{
  /* 当前项目在单元格内水平垂直居中 */
  place-self: center;
}

很多新手会疑惑，Grid 和 Flexbox 该如何取舍——二者不是替代关系，而是互补关系。

最佳实践：

1. 一维场景优先 Flexbox：导航栏、按钮组、单行横向排列、垂直居中；
2. 二维场景优先 Grid：卡片列表、后台布局、杂志图文混排、多行列不规则模块；
3. 混合使用：Grid 做大页面整体骨架，Grid 单元格内部，再用 Flexbox 处理内部一维内容。

1. auto-fit + minmax 优先，尽可能减少媒体查询。绝大多数卡片网格，不需要写 @media 即可完成基础自适应。

2. 需要强定制布局时，配合媒体查询修改 grid-template-columns：

.container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px){
  .container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .container{ grid-template-columns: 1fr; }
}

3. 小屏设备下直接取消网格布局，降级为块布局：

@media (max-width: 576px){
  .layout{ display: block; }
}

4. fr 单位不要搭配百分比混用计算，fr 已经自动扣除 gap 间隙，避免尺寸计算混乱。

1. 以下版本起全部原生支持 Grid，现代业务项目完全可以直接上：

2. 如果需要兼容非常老旧浏览器（IE11）：IE 支持老版本 Grid 语法，属性有大量兼容差异，建议使用降级方案，直接回退到 float / Flexbox。

3. 开发调试技巧：浏览器开发者工具 Elements 面板，选中 Grid 容器，点击 grid 标签，浏览器会高亮网格线、单元格，直观查看网格结构，调试效率极高——本页首屏的"网格解剖图"就是它的样子。

拖动滑块，或抓住预览区右下角横向拉伸容器宽度，右侧代码实时同步；开启 auto-fit 后观察列数随宽度自动增减——这正是案例①的运行机制。

CSS Grid 是 CSS 有史以来最强大的布局系统，重新定义了 Web 二维布局的开发模式：

1. 核心思想：先定义网格轨道结构，再放置元素。fr 单位、auto-fit、minmax 是三大最强特性。
2. 容器属性定义网格行列、间隙、对齐；项目属性控制单个子元素跨单元格、定位。
3. Grid 不是用来完全替代 Flexbox，二者各司其职：一维选 Flexbox，二维选 Grid，开发中常常组合使用。
4. auto-fit + minmax 可以实现零媒体查询自适应网格，大量减少响应式代码。
5. 善用浏览器网格调试工具，理清容器、项目、隐式轨道概念，避开常见坑。

掌握 Grid 之后，过去复杂、需要大量嵌套 hack 的页面排版，现在只需要简洁的 CSS 代码即可完成，页面结构更加优雅清晰，大幅降低维护成本，让响应式开发如虎添翼。