CSS网格容器完全指南
专为编程小白打造的CSS Grid布局详解
网格布局（Grid Layout）是CSS中最强大的布局系统，它让我们可以轻松创建复杂的二维布局。本指南将用通俗易懂的语言，详细介绍CSS网格容器的所有核心概念和使用方法。
1. 什么是网格容器？
网格布局的基础概念
网格容器（Grid Container）是应用了 display: grid 或 display: inline-grid 的元素。这个元素的所有直接子元素都会自动变成网格项目。
简单理解：
想象一个Excel表格，网格容器就是整个电子表格，网格项目就是表格中的每个单元格。
/* 创建网格容器 */
.container {
display: grid; /* 或 inline-grid */
}
项目1
项目2
项目3
项目4
项目5
项目6
2. 定义行和列
设置网格结构
使用 grid-template-columns 定义列，grid-template-rows 定义行。
.container {
display: grid;
/* 3列：第1列150px，第2列自动填充，第3列250px */
grid-template-columns: 150px 1fr 250px;
/* 2行：第1行100px，第2行自动高度 */
grid-template-rows: 100px auto;
}
单位解释：
fr单位：表示可用空间的分数（类似flex中的flex-grow）
auto：根据内容自动调整
示例：创建3列布局（左侧菜单、主内容区、右侧边栏）
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-rows: 80px 1fr 100px;
}
3. 网格间隙（Gap）
控制网格项目间的距离
使用 gap 属性设置行和列之间的间距。
.container {
/* 行间隙10px，列间隙20px */
gap: 10px 20px;
/* 也可以分开设置 */
row-gap: 10px;
column-gap: 20px;
}
重要提示：
网格间隙只存在于网格项目之间，不会在容器边缘创建额外空间。
项目1
项目2
项目3
项目4
项目5
项目6
4. 网格线（Grid Lines）
布局的关键参考线
网格线是构成网格结构的垂直线和水平线。网格项目可以定位在这些线上。
项目1（列1-2，行1-2）
项目2（列2-3，行1-2）
项目3（列1-2，行2-3）
列线1
列线2
列线3
行线1
行线2
/* 项目从第1列线开始，到第3列线结束 */
.item {
grid-column-start: 1;
grid-column-end: 3;
/* 简写 */
grid-column: 1 / 3;
}
5. 网格区域（Grid Areas）
给网格区域命名
通过给网格区域命名，可以直观地布局页面结构。
.container {
display: grid;
grid-template-areas:
“header header header”
“sidebar main ads”
“footer footer footer”;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }
命名规则：
每个区域名称必须在网格中形成矩形区域，使用点 . 表示空白区域。
header
sidebar
main
ads
footer
6. 隐式网格（Implicit Grid）
处理额外项目
当网格项目数量超过定义的网格单元格时，浏览器会自动创建隐式轨道。
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 显式定义2列 */
/* 控制隐式网格行为 */
grid-auto-rows: 100px; /* 隐式行高100px */
grid-auto-columns: 200px; /* 隐式列宽200px */
grid-auto-flow: row; /* 默认：按行排列 */
}
grid-auto-flow属性：
row：按行排列（默认）
column：按列排列
dense：尝试填充网格中的空白
项目1
项目2
项目3（隐式行）
项目4（隐式行）
项目5（隐式行）
7. 对齐方式
控制网格内容对齐
CSS Grid提供了强大的对齐控制，类似Flexbox但更强大。
.container {
/* 容器内所有项目的水平对齐 */
justify-items: center; /* start | end | center | stretch */
/* 容器内所有项目的垂直对齐 */
align-items: center; /* start | end | center | stretch */
/* 整个网格在容器内的水平对齐 */
justify-content: space-between;
/* 整个网格在容器内的垂直对齐 */
align-content: center;
}
/* 单个项目的对齐 */
.item {
justify-self: start;
align-self: end;
}
1
2
3
4
整个网格在容器内：水平居中，垂直底部对齐
8. 响应式网格
适应不同屏幕尺寸
使用媒体查询和灵活单位创建响应式布局。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* 媒体查询调整布局 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
}
auto-fit vs auto-fill：
auto-fit：伸展项目填满可用空间
auto-fill：尽可能多地创建轨道
minmax()函数：定义最小和最大尺寸范围
/* 列宽最小200px，最大1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
项目1
项目2
项目3
项目4
9. 实用示例
常见布局模式
经典三栏布局：
.layout {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-rows: 80px 1fr 100px;
grid-template-areas:
“header header header”
“sidebar main ads”
“footer footer footer”;
min-height: 100vh;
}
瀑布流布局：
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 10px; /* 控制行高 */
gap: 15px;
}
/* 项目高度不同 */
.item {
grid-row-end: span 20; /* 根据高度调整 */
}
表单布局：
.form {
display: grid;
grid-template-columns: [labels] auto [controls] 1fr;
gap: 10px;
}
label {
grid-column: labels;
}
input, select {
grid-column: controls;
}