目录

一、Grid布局基础概念

1.1 网格容器与网格项

1.2 创建基本网格 

二、核心属性详解

2.1 定义网格轨道

2.2 网格间距控制

2.3 网格项对齐方式

三、实战布局技巧

3.1 创建经典布局

3.2 网格项定位技巧

3.3 响应式网格设计

四、Grid布局 vs Flexbox布局

五、高级技巧与最佳实践

5.1 隐式网格与显式网格

 5.2 使用minmax()函数

5.3 层叠与z-index控制

5.4 子网格(subgrid)支持

六、浏览器支持与渐进增强

结语：拥抱Grid布局新时代

---

一、Grid布局基础概念

1.1 网格容器与网格项

/* 创建网格容器 */
.container {display: grid; /* 或 inline-grid */
}

• 网格容器：应用display: grid的元素

• 网格项：网格容器的直接子元素

• 网格线：构成网格结构的水平线和垂直线

• 网格轨道：相邻网格线之间的空间（行或列）

• 网格单元格：相邻行列网格线交叉形成的空间

• 网格区域：任意矩形区域，由四条网格线界定

1.2 创建基本网格 

.container {display: grid;grid-template-columns: 100px 200px auto; /* 三列：固定100px, 固定200px, 自适应 */grid-template-rows: 100px 300px; /* 两行：固定高度 */gap: 15px; /* 行列间距 */
}

二、核心属性详解

2.1 定义网格轨道

.container {/* 使用像素单位 */grid-template-columns: 200px 200px 200px;/* 使用fr单位（比例单位） */grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 *//* 使用repeat()函数 */grid-template-columns: repeat(4, 1fr); /* 创建四等分列 *//* 混合使用 */grid-template-columns: 200px repeat(2, 1fr) 300px;/* 自动行高 */grid-auto-rows: minmax(100px, auto);
}

2.2 网格间距控制

.container {gap: 20px; /* 行列间距相同 *//* 或分别设置 */row-gap: 15px;column-gap: 30px;
}

2.3 网格项对齐方式

/* 容器内对齐 */
.container {justify-items: center; /* 水平对齐 */align-items: end;     /* 垂直对齐 */place-items: center end; /* 简写形式 */
}/* 整个网格在容器中对齐 */
.container {justify-content: space-around;align-content: center;
}

三、实战布局技巧

3.1 创建经典布局

.container {display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 80px 1fr 100px;grid-template-areas:"header header""sidebar content""footer footer";height: 100vh;gap: 10px;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

3.2 网格项定位技巧

.item {/* 使用行线和列线定位 */grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;/* 简写形式 */grid-column: 1 / 3;grid-row: 2 / 4;/* 使用span关键字 */grid-column: span 2; /* 跨越两列 *//* 区域命名定位 */grid-area: content;
}

3.3 响应式网格设计

.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;
}@media (max-width: 768px) {.container {grid-template-columns: 1fr;}.sidebar {grid-row: 2; /* 移动侧边栏位置 */}
}

四、Grid布局 vs Flexbox布局

特性	Grid布局	Flexbox布局
维度	二维布局（行+列）	一维布局（行或列）
方向控制	同时控制行和列	一次控制一个方向
内容流	更适合整体页面布局	更适合组件内部布局
重叠控制	轻松实现元素重叠	需要额外定位技巧
对齐方式	更强大的对齐控制	对齐功能强大但较单一

最佳实践：Grid用于宏观布局，Flexbox用于微观组件布局，两者可完美结合使用！

五、高级技巧与最佳实践

5.1 隐式网格与显式网格

.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 显式网格 */grid-auto-rows: 100px; /* 隐式行高度 */grid-auto-columns: 200px; /* 隐式列宽度 */grid-auto-flow: dense; /* 自动填充空白区域 */
}

 5.2 使用minmax()函数

.container {grid-template-columns: repeat(3, minmax(200px, 1fr));
}

5.3 层叠与z-index控制

.item {grid-column: 1;grid-row: 1;z-index: 2; /* 网格项可以层叠 */
}

5.4 子网格(subgrid)支持

.container {display: grid;grid-template-columns: 1fr 1fr;
}.item {display: grid;grid-template-columns: subgrid; /* 继承父网格列轨道 */grid-column: span 2; /* 跨越两列 */
}

六、浏览器支持与渐进增强

Grid布局已得到所有现代浏览器的良好支持（包括IE10/11的部分支持）。对于旧版浏览器，可以采用渐进增强策略：

.container {display: flex; /* 回退方案 */flex-wrap: wrap;
}@supports (display: grid) {.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
}

结语：拥抱Grid布局新时代

CSS Grid布局是网页设计领域的革命性进步，它为我们提供了前所未有的布局能力。通过掌握Grid布局，你可以：

1. 轻松创建复杂的响应式布局

2. 减少不必要的HTML嵌套

3. 提高代码可维护性和可读性

4. 实现更灵活的设计方案

5. 提升开发效率，减少布局时间