Grid布局通过CSS的display: grid实现，需定义容器和项目；使用grid-template-columns/rows设置行列，fr单位与repeat()函数可简化布局；支持网格线编号或命名区域定位项目；结合justify-items、align-items等控制对齐，并通过媒体查询实现响应式设计。
Grid布局是CSS3引入的一种二维布局系统，能够同时处理行和列，非常适合构建复杂的网页结构。HTML5本身并不直接提供Grid布局功能，而是通过CSS中的display: grid来实现。下面详细介绍如何在HTML5中使用Grid布局。
1. 基本概念：容器与项目
使用Grid布局时，首先要定义一个网格容器，然后其直接子元素会自动成为网格项目。
设置容器：- 给父元素（容器）添加
display: grid或display: inline-grid。 - 容器内的每个子元素就是网格中的一个单元格（项目）。
示例HTML：
1234
CSS设置为网格容器：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
}2. 定义行和列
使用grid-template-columns和grid-template-rows来定义列宽和行高。
-
grid-template-columns: 100px 200px 100px;—— 创建三列，宽度分别为100px、200px、100px。 -
grid-template-rows: 50px 100px;—— 创建两行，高度分别为50px和100px。 - 可以使用
fr单位分配剩余空间，如1fr 2fr表示比例为1:2。 - 使用
repeat()函数简化重复定义，例如：repeat(3, 1fr)等价于1fr 1fr 1fr。
示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
gap: 10px; /* 设置项目之间的间距 */
}3. 网格线与区域命名
Grid支持通过网格线编号或自定义名称来定位项目。
- 每个网格线从左到右、从上到下编号，项目可通过
grid-column和grid-row指定起止线。 - 也可以使用
grid-area一次性设置四个边的位置。
示例：让第一个项目占据第1到第3列
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}使用命名区域更直观：
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.item1 { grid-area: header; }
.item2 { grid-area: sidebar; }
.item3 { grid-area: main; }
.item4 { grid-area: footer; }
4. 对齐方式与响应式设计
Grid提供了强大的对齐控制能力。
-
justify-items：控制项目在行轴上的对齐（如left、center、right）。 -
align-items：控制项目在列轴上的对齐（如start、center、end）。 -
justify-content：当网格总大小小于容器时，控制整体内容的水平分布。 - 结合
@media查询可实现响应式布局，比如在小屏幕上改为单列排列。
响应式示例：
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}基本上就这些。Grid布局灵活且强大，掌握后能轻松实现各种复杂页面结构。关键是理解容器与项目的划分、行列定义以及区域命名的方式。实际开发中建议结合浏览器开发者工具调试网格效果。不复杂但容易忽略细节。基本上就这些。
