CSS Grid 网格布局（display: grid）全解析

display: grid 是 CSS 中最强的二维布局方案（同时控制行和列），相比 Flex 布局（一维，仅控制行或列），Grid 能更精准地划分页面区域、实现复杂的网格排版，比如商品卡片、表单布局、页面整体框架等。

术语	含义	通俗解释
网格容器（Grid Container）	设置了 `display: grid` 的元素	比如 `<div class="container">`，是所有网格子项的 "父盒子"
网格子项（Grid Item）	网格容器的直接子元素	容器里的 `<div class="item">`，只会影响直接子元素，孙子元素不受控
网格线（Grid Line）	划分网格的横线 / 竖线	比如 3 列网格有 4 条竖线（编号 1、2、3、4），用来定位子项位置
网格单元格（Grid Cell）	行和列交叉形成的最小单位	类似表格的 "单元格"，是网格的最小组成部分
网格轨道（Grid Track）	相邻两条网格线之间的区域	横向叫「行轨道」（行高），纵向叫「列轨道」（列宽）
网格区域（Grid Area）	多个单元格合并的区域	由任意数量的单元格组成，可用来定义大模块（比如页眉、主体）

一. 开启 Grid 布局

给父容器设置 display: grid，直接子元素就会变成网格子项

复制代码

/* 网格容器 */
.grid-container {
  display: grid; /* 核心：开启网格布局 */
  /* 可选：inline-grid，容器自身行内显示（类似 inline-block） */
  /* display: inline-grid; */
}

/* 网格子项（无需额外设置，默认自动排列） */
.grid-item {
  /* 子项样式，比如背景、高度 */
}

二. 定义列和行（最核心的 2 个属性）

Grid 的核心是「划分列和行」，常用 grid-template-columns（列）和 grid-template-rows（行）：

（1）固定尺寸（像素 / 百分比）

复制代码

.grid-container {
  display: grid;
  /* 定义3列，宽度分别为100px、200px、100px */
  grid-template-columns: 100px 200px 100px;
  /* 定义2行，高度分别为80px、120px */
  grid-template-rows: 80px 120px;
  gap: 10px; /* 单元格间距（列+行），替代传统的 margin，更方便 */
}

（2）弹性尺寸（fr 单位）

fr 是 Grid 专属的 "份数单位"，表示「剩余空间的占比」，无需计算百分比，自动平分

容器需设高度，fr 才生效

复制代码

.grid-container {
  display: grid;
  /* 3列，每列占1份（平分容器宽度） */
  grid-template-columns: 1fr 1fr 1fr;
  /* 2行，第一行1份，第二行2份（行高按比例分配） */
  grid-template-rows: 1fr 2fr;
  height: 300px; /* 容器需设高度，fr 才生效 */
}

（3）重复函数（repeat ()）

避免重复写相同值，简化代码（比如 3 列每列 1fr）：

复制代码

.grid-container {
  display: grid;
  /* repeat(重复次数, 重复值)：3列，每列1fr */
  grid-template-columns: repeat(3, 1fr);
  /* 混合写法：2列固定100px，后面3列各1fr */
  grid-template-columns: 100px 100px repeat(3, 1fr);
}

（4）自适应尺寸（minmax ()）

定义尺寸范围（最小 / 最大），结合 auto-fit/auto-fill 实现响应式

复制代码

.grid-container {
  display: grid;
  /* 自动适配列数，每列最小250px，最大1fr（自适应） */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

三、常用属性（按场景分类，好记）

容器属性（给 grid 容器加的）

属性	作用	示例
`grid-template-columns`	定义列数和列宽	`1fr 2fr` / `repeat(3, 100px)` / `minmax(200px, 1fr)`
`grid-template-rows`	定义行数和行高	同列属性，只是控制行
`gap`（简写）	单元格间距（列 + 行）	`10px` / `10px 20px`（列间距 10，行间距 20）
`grid-column-gap`	仅列间距（gap 拆分版）	`10px`
`grid-row-gap`	仅行间距（gap 拆分版）	`20px`
`justify-items`	子项在单元格内「水平对齐」	`start`/`center`/`end`/`stretch`（默认拉伸）
`align-items`	子项在单元格内「垂直对齐」	同 justify-items
`place-items`	简写：垂直 + 水平对齐	`center center`（居中）
`justify-content`	整个网格在容器内「水平对齐」（网格总宽度＜容器宽度时生效）	`center`/`space-between`/`space-around`
`align-content`	整个网格在容器内「垂直对齐」（网格总高度＜容器高度时生效）	同 justify-content
`grid-template-areas`	给网格区域命名，快速布局	见下方实战示例

子项属性（给 grid 子项加的）用来精准定位单个子项（比如让某个子项跨多行 / 多列）：

属性	作用	示例
`grid-column-start`/`grid-column-end`	子项跨列（按网格线编号）	`grid-column: 1 / 3`（从第 1 条竖线到第 3 条，跨 2 列）
`grid-row-start`/`grid-row-end`	子项跨行（按网格线编号）	`grid-row: 2 / 4`（跨 2 行）
`grid-column`	跨列简写	`1 / span 2`（从第 1 列开始，跨 2 列）
`grid-row`	跨行简写	`2 / span 3`（从第 2 行开始，跨 3 行）
`grid-area`	定位子项（对应命名的区域）	`header`（对应 grid-template-areas 的 header）
`justify-self`	单个子项水平对齐（覆盖容器的 justify-items）	`center`
`align-self`	单个子项垂直对齐（覆盖容器的 align-items）	`center`

四、实战示例（2 个高频场景，直接复用）

场景 1：响应式卡片网格

实现 "屏幕宽多列、屏幕窄少列" 的自适应卡片，无需媒体查询

复制代码

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
</div>

<style>
.card-container {
  display: grid;
  /* 核心：自适应列数，每列最小250px，最大平分空间 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* 卡片间距 */
  padding: 20px;
}
.card {
  height: 200px;
  background: #409eff;
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

场景 2：页面整体布局（页眉 + 侧边栏 + 主体 + 页脚）:用 Grid 快速搭建页面框架，比 Flex 更简单

复制代码

<div class="page-container">
  <header>页眉</header>
  <aside>侧边栏</aside>
  <main>主体内容</main>
  <footer>页脚</footer>
</div>

<style>
.page-container {
  display: grid;
  /* 定义列：侧边栏200px，主体占剩余 */
  grid-template-columns: 200px 1fr;
  /* 定义行：页眉60px，主体1fr，页脚60px */
  grid-template-rows: 60px 1fr 60px;
  /* 给区域命名（对应子项的 grid-area） */
  grid-template-areas:
    "header header"  /* 页眉跨2列 */
    "aside main"     /* 侧边栏+主体 */
    "footer footer"; /* 页脚跨2列 */
  height: 100vh; /* 占满视口高度 */
  gap: 10px;
}

header {
  grid-area: header; /* 对应命名的 header 区域 */
  background: #f56a00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
aside {
  grid-area: aside;
  background: #722ed1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
main {
  grid-area: main;
  background: #1890ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer {
  grid-area: footer;
  background: #00a854;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

五、Grid vs Flex（怎么选？）

布局类型	推荐方案	示例
一维布局（仅排一行 / 一列）	Flex	导航栏、按钮组、单行文字居中
二维布局（同时控制行 + 列）	Grid	商品卡片、页面框架、表单、相册
响应式网格（自适应列数）	Grid（auto-fit + minmax）	卡片列表、图片画廊
子项跨多行 / 多列	Grid	不规则布局、合并单元格

六、兼容性 & 注意事项

兼容性：现代浏览器（Chrome/Firefox/Edge/Safari 10+）都支持，无需前缀，移动端也兼容；
子项默认行为 ：Grid 子项默认是「块级元素」，即使是 <span> 也会变成块级；
fr 单位：仅在容器有固定高度 / 宽度时生效（比如行高用 fr 需给容器设 height）；
auto-fit vs auto-fill ：
- auto-fit：列数适配后，子项会占满容器（无空白）；
- auto-fill：列数适配后，会保留空白列（适合固定列数的场景）；
- 日常用 auto-fit 更实用。

总结

display: grid 是 CSS 中最强大的布局方案，核心优势是「二维控制」和「自适应网格」：

基础用法：给容器加 display: grid，用 grid-template-columns/rows 定义行列；
响应式核心：repeat(auto-fit, minmax(最小值, 1fr)) 实现无媒体查询的自适应；
进阶用法：用 grid-template-areas 快速搭建页面框架，用子项属性实现跨行列布局；
选型原则：一维用 Flex，二维用 Grid。