CSS Grid 是目前最强大的二维布局系统，可以同时处理行和列。相比 Flexbox 的一维布局，Grid 更适合构建复杂的网页整体结构。本文从基础概念到高级技巧，全面总结 Grid 布局的核心知识点。
一、Grid 核心概念
- Grid 容器：声明
display: grid或inline-grid的元素。 - 网格线 (grid lines)：构成网格的分界线，有行号和列号。
- 网格轨道 (grid track)：两条相邻网格线之间的空间，即一行或一列。
- 网格单元格 (grid cell)：最小的单位，四条网格线围成的区域。
- 网格区域 (grid area)：由多条网格线围成的矩形区域，可包含多个单元格。
二、容器属性（常用）
1. display: grid / inline-grid
定义块级或行内网格容器。
2. grid-template-columns / grid-template-rows
定义列宽和行高。可以使用固定值、百分比、fr 单位（剩余空间分数）、repeat() 函数。
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-template-rows: auto 100px;
}3. gap (grid-gap)
设置行与列之间的间隙，可分别设置 row-gap 和 column-gap。
.container {
gap: 20px 30px;
/* 等同于 row-gap:20px; column-gap:30px; */
}4. justify-items / align-items
控制所有单元格内容的水平/垂直对齐方式，可选值：start, end, center, stretch（默认）。
5. place-items
同时设置 align-items 和 justify-items 的简写。
三、子项属性（常用）
1. grid-column / grid-row
指定项目占用的列/行起始和结束位置，基于网格线编号。
.item {
grid-column: 1 / 3; /* 从第1条列线开始到第3条结束，即跨2列 */
grid-row: 2 / 4;
}2. grid-area
可以指定四个边的网格线，或者与命名网格区域配合使用。
四、实战案例：经典博客布局
利用 Grid 快速构建 头部-侧边栏-内容-底部 的响应式布局：
<div class="blog">
<header>头部</header>
<aside>侧边栏</aside>
<main>主要内容</main>
<footer>底部</footer>
</div>
五、常用布局示例演示
1
2
3
4
5
6
⬆️ 三列等宽，自动换行（Grid 默认按行填充）
六、与 Flexbox 的对比选择
- 一维布局（单行或单列） → Flexbox（例如导航栏、列表排列）
- 二维布局（行列同时控制） → Grid（例如整体页面、相册画廊、复杂表单）
- 两者可结合使用：Grid 负责宏观结构，内部元素用 Flexbox 做细节排列。
CSS Grid 是现代前端开发的必备技能，掌握它能够大幅提高布局效率。本文所有示例均已在个人测试环境中验证，欢迎参考学习。