CSS网格布局完全指南
专为编程小白设计的CSS网格布局知识点汇总 – 用通俗语言解释复杂概念，附带可视化演示
什么是网格布局？
网格布局(Grid Layout)是CSS中一种强大的二维布局系统，可以同时控制行和列。
通俗解释： 把网页想象成一张方格纸，网格布局让你能精确控制每个内容放在哪个格子里，以及格子的大小、间距等。
网格 vs 弹性盒子
弹性盒子(Flexbox)
一维布局（行或列）
适合小范围布局
内容驱动布局
网格布局(Grid)
二维布局（行和列）
适合整体页面布局
容器驱动布局
核心概念
网格容器
应用display: grid;的元素，所有直接子元素自动成为网格项
.container {
display: grid;
}
display: grid;
}
网格项
网格容器的直接子元素
网格项1
网格项2
网格项3
创建网格轨道
网格轨道是行或列的空间，使用grid-template-columns和grid-template-rows定义
.container {
grid-template-columns: 100px 200px auto;
grid-template-rows: 80px auto 120px;
}
grid-template-columns: 100px 200px auto;
grid-template-rows: 80px auto 120px;
}
列1: 100px
列2: 200px
列3: auto
行1: 80px
行2: auto
行3: 120px
常用单位：
- px – 固定像素值
- fr – 剩余空间占比单位
- % – 百分比
- auto – 自动填充
- minmax(min, max) – 定义大小范围
网格线和网格区域
网格线
划分网格的垂直线和水平线，从1开始编号
网格线
1
2
3
网格区域
一个或多个网格单元格组成的矩形区域
这个虚线框就是一个网格区域，可以包含多个单元格
放置网格项
控制网格项在网格中的位置
根据网格线定位
.grid-item {
grid-column-start: 1; /* 开始于第1条垂直线 */
grid-column-end: 3; /* 结束于第3条垂直线 */
grid-row-start: 2;
grid-row-end: 4;
}
grid-column-start: 1; /* 开始于第1条垂直线 */
grid-column-end: 3; /* 结束于第3条垂直线 */
grid-row-start: 2;
grid-row-end: 4;
}
简写方式：
.grid-item {
/* 行开始 / 列开始 / 行结束 / 列结束 */
grid-area: 2 / 1 / 4 / 3;
}
/* 行开始 / 列开始 / 行结束 / 列结束 */
grid-area: 2 / 1 / 4 / 3;
}
1
2
3
占据2行2列
5
6
网格间距
调整网格项之间的间距
.container {
gap: 20px; /* 同时设置行和列间距 */
/* 或者分别设置 */
column-gap: 15px;
row-gap: 25px;
}
gap: 20px; /* 同时设置行和列间距 */
/* 或者分别设置 */
column-gap: 15px;
row-gap: 25px;
}
间距对比
无间距
1
2
3
有间距 (gap: 20px)
1
2
3
网格对齐方式
控制网格项在网格区域内的对齐方式
容器属性：
.container {
/* 水平对齐所有网格项 */
justify-items: center;
/* 垂直对齐所有网格项 */
align-items: stretch;
}
/* 水平对齐所有网格项 */
justify-items: center;
/* 垂直对齐所有网格项 */
align-items: stretch;
}
网格项属性：
.grid-item {
/* 水平对齐单个项 */
justify-self: end;
/* 垂直对齐单个项 */
align-self: center;
}
/* 水平对齐单个项 */
justify-self: end;
/* 垂直对齐单个项 */
align-self: center;
}
start
center
end
命名网格区域
给网格区域命名，直观地放置元素
.container {
grid-template-areas:
“header header header”
“sidebar main main”
“footer footer footer”;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
grid-template-areas:
“header header header”
“sidebar main main”
“footer footer footer”;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Header
Sidebar
Main Content
Footer
实际应用示例
响应式照片墙布局：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
1
2
3
4
5
6
7
8
提示： 调整浏览器窗口大小，观察网格如何自动调整布局