CSS Grid 布局详解（2025最新标准）

CSS Grid布局一般是指容器的display样式被赋值为 grid，再在容器上布置项目（Item）的布局，它是目前最强大的二维布局系统，比 Flexbox 更适合复杂布局（如仪表盘、杂志排版、响应式页面等）。它可以同时控制行和列，彻底改变了我们写布局的方式。

1. 基本概念

.container {
  display: grid;                     /* 或者 inline-grid */
  grid-template-columns: ...;       /* 定义列 */
  grid-template-rows: ...;          /* 定义行 */
  gap: 20px;                        /* 行间距 + 列间距（以前叫 grid-gap） */
  /* 简写 */
  grid-template: rows / columns;    /* 综合写法 */
}

核心单位和关键字

单位/关键字	含义	示例
fr	剩余空间比例单位（fraction）	1fr 2fr → 1:2 分配剩余空间
auto	自动填充内容大小	auto 1fr
minmax(min, max)	最小和最大限制	minmax(200px, 1fr)
repeat(count, size)	重复轨道	repeat(3, 1fr) = 1fr 1fr 1fr
auto-fit / auto-fill	与 repeat 配合实现响应式网格	repeat(auto-fit, minmax(250px, 1fr))
fit-content()	根据内容最大不超过某个值	fit-content(300px)

2. 网格线（Grid Lines）与命名

网格线是从 1 开始编号的（不是 0！）

.container {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  grid-template-rows: 100px 200px 100px;

  /* 给网格线命名（超级好用！）*/
  grid-template-columns: [start] 100px [content-start] 1fr [content-end] 200px [end];
  grid-template-rows: [header-end] 100px [main-start] 200px [main-end] 100px [footer-start];
}

3. 网格区域（Grid Areas）------ 最优雅的写法

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;

  grid-template-areas: 
    "header header header header"
    "nav    main   main   aside"
    "footer footer footer footer";
}

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

下图展示了容器和Item在相应的CSS配置下在浏览器中排列的样子：

这是最直观、最易维护的大型布局方式！

4. 项目放置方式（6种方法）

.item {
  /* 方法1：网格线编号（最基础）*/
  grid-column: 1 / 4;      /* 从第1条线到第4条线（占3列）*/
  grid-row: 2 / 5;

  /* 方法2：简写*/
  grid-column: 1 / -1;     /* -1 表示最后一条线，占满整行 */
  grid-row: 1 / span 2;    /* span 表示跨度 */

  /* 方法3：使用命名线*/
  grid-column: content-start / content-end;

  /* 方法4：使用 grid-area 名称（最推荐）*/
  grid-area: main;

  /* 方法5：grid-area 简写：row-start / column-start / row-end / column-end */
  grid-area: 1 / 2 / 3 / 4;

  /* 方法6：自动放置（配合 order 使用）*/
  grid-column: auto;
}

下图展示了不同的项目放置方式（除已图示的网格区域放置方式外）的布局效果：

5. 强大的重复与响应式技巧

经典12列响应式布局（推荐）

.grid {
  display: grid;
  gap: 20px;
  
  /* 移动端：1列 → 平板：2列 → 桌面：12列 */
  grid-template-columns: repeat(12, 1fr);
  
  /* 超强响应式写法（自动伸缩卡片）*/
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* auto-fit：空轨道会折叠，适合铺满 */
  /* auto-fill：空轨道保留，适合固定间距 */
}

卡片等高布局（完美解决旧时代痛点）

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  
  /* 子元素自动拉伸到同等高度 */
  align-items: stretch; /* 默认值就是这个！ */
}

6. 对齐方式（比 Flex 更强大）

.container {
  justify-items: start | end | center | stretch;   /* 水平对齐所有项目 */
  align-items:   start | end | center | stretch;   /* 垂直对齐所有项目 */

  justify-content: space-around | space-between | center | start | end; /* 整个网格水平对齐 */
  align-content:   same;                                              /* 整个网格垂直对齐 */

  place-items:     center center;      /* align-items + justify-items 简写 */
  place-content:   center center;      /* align-content + justify-content 简写 */
}

.item {
  justify-self: start | end | center | stretch;  /* 单个项目水平 */
  align-self:   start | end | center | stretch;  /* 单个项目垂直 */
  place-self:   center center;                    /* 简写 */
}

7. 隐式网格（Implicit Grid）

当内容超出你定义的行列时，自动创建：

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 300px;     /* 只定义了两行 */

  /* 超出后自动创建的行/列行为 */
  grid-auto-rows: minmax(150px, auto);     /* 自动行高度最小150px */
  grid-auto-columns: 200px;
  grid-auto-flow: row | column | dense;    /* dense 可以填补空洞 */
}

dense 算法示例（解决"网格洞"问题）：

.grid {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense;   /* 关键！ */
}

.item1 { grid-column: span 3; }
.item2 { grid-column: span 2; }  /* 会自动填补前面的空隙 */

8. 实际项目中最常用的布局模板

1. 圣杯布局（经典三栏）

.holy-grail {
  display: grid;
  grid-template: 
    "header header header" 100px
    "nav    main   aside" 1fr
    "footer footer footer" 80px / 200px 1fr 200px;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

2. 杂志式复杂布局

.magazine {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 200px);

  grid-template-areas:
    "a a b c"
    "a a d c"
    "e f d g"
    "h i j j";
}

3. 现代仪表盘布局

.dashboard {
  display: grid;
  gap: 1rem;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr 50px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  height: 100vh;
}

9. 子网格（Subgrid）------ 2025年已广泛支持！

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

.child {
  display: grid;
  grid-template-columns: subgrid;   /* 继承父级的列 */
  grid-column: 1 / -1;              /* 占满整行 */
}

10. 最佳实践总结（建议收藏）

/* 推荐的响应式网格写法（万能模板） */
.responsive-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  
  /* 或者更激进的写法 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 大型布局永远优先使用 grid-template-areas */
/* 小型布局使用 auto-fit + minmax */
/* 永远记得 gap 替代 margin 防止外边距塌陷 */
/* 用命名网格线提高可读性 */
/* 用 dense 填补网格空洞 */

响应式布局示例：

在这种布局里，拉动浏览器窗体边框以改变其宽度，可以看到各Item的宽度的变化以及行列数与浏览器视口宽度的自适应变化。此布局示例的HTML代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>响应式布局万能模板</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
	<script>hljs.highlightAll();</script>
	<style>
		h1,	h2,	h3 {
			text-align: center;
			margin: 0
		}
	
		p {
			margin-left: 2em
		}
	
		body {
			margin: 0;
			background: #f5f5f5;
			font-family: sans-serif
		}
	
		.responsive-grid {
			display: grid;
			gap: 3px;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
			background: #2ecc71；
	
			/* 或者更激进的写法 */
			/*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
		}
		
		.left {
			background: #ff7043;
			color: #fff
		}
	
		.right {
			background: #29b6f6;
			color: #fff
		}
	</style>
</head>

<body>
	<h1>子网格 subgrid 演示</h1>
	<h2>.parent 与 .card 样式</h2>
	<pre><code class="language-css">
		.responsive-grid {
			display: grid;
			gap: 3px;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
			background: #2ecc71；
			/* 或者更激进的写法 */
			/*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
		}
		</code></pre>
	<div class="responsive-grid">
			<div class="left">
				<h3>Left</h3>
				<p>Item无需定义与布局相关样式。</p>
				<p>添加的Item数量增加且最小宽度总和超过浏览器视口宽度时会自动增加行，否则列宽均分视口宽度。每行按不小于最小宽度容纳尽量多的Item。行高会随着内容的多少自动增加以适应。</p>
			</div>
			<div class="right">
				<h3>Right</h3>				
				<p>Item无需定义与布局相关样式</p>
			</div>
			<div class="right">
				<h3>Column C</h3>				
				<p>Item无需定义与布局相关样式</p>
			</div>
			<div class="right">
				<h3>Column D</h3>				
				<p>Item无需定义与布局相关样式</p>
			</div>
			<div class="right">
				<h3>Column E</h3>				
				<p>Item无需定义与布局相关样式</p>
			</div>
		</div>
</body>

</html>

可以在这个代码的基础上修改CSS以观察本文所介绍的各种布局的变化。