HTML Grid布局是CSS3中专门用于二维布局的模块，能够同时控制元素在行和列两个方向上的排列，相比传统的浮动、flex布局，更适合实现复杂的多行列页面结构，比如后台管理系统的侧边栏加内容区布局、电商商品的多列网格展示等场景。
Grid布局的核心概念
使用Grid布局首先需要理解两个核心角色：网格容器和网格项目。给一个元素设置display: grid或display: inline-grid后，这个元素就成为网格容器，它的直接子元素会自动成为网格项目。
网格布局还包含网格线、网格轨道、网格单元格、网格区域等概念，其中网格线是划分行列的边界线，网格轨道是相邻两条网格线之间的空间，也就是我们常说的行或列。
Grid容器的基础语法
定义网格轨道
通过grid-template-columns定义列轨道的宽度，grid-template-rows定义行轨道的高度，支持固定像素、百分比、fr单位（剩余空间分配比例）等取值方式。
/* 定义3列，每列宽度100px */
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 80px 80px;
}
设置网格间距
使用grid-gap可以同时设置行间距和列间距，也可以分开用grid-row-gap和grid-column-gap单独设置。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px; /* 行和列间距都是20px */
}
Grid项目的基础语法
网格项目可以通过指定网格线来放置到特定位置，常用属性包括grid-column-start、grid-column-end、grid-row-start、grid-row-end，也可以用简写属性grid-column和grid-row。
/* 让第一个项目占据第1到第3列，第1行 */
.grid-item:first-child {
grid-column: 1 / 3; /* 等同于 grid-column-start:1; grid-column-end:3 */
grid-row: 1 / 2;
}
Grid布局实例演示
实例1：三列等宽网格布局
实现3列等宽的卡片网格，每列宽度平均分配剩余空间，列间距20px，行间距20px。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid三列布局实例</title>
<style>
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 重复3次1fr，等同于1fr 1fr 1fr */
grid-gap: 20px;
padding: 20px;
}
.card {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="card-grid">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
</div>
</body>
</html>
实例2：后台管理系统经典布局
实现左侧固定宽度侧边栏，右侧顶部固定高度导航栏，剩余区域为内容区的布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后台布局实例</title>
<style>
.admin-layout {
display: grid;
grid-template-columns: 200px 1fr; /* 左侧200px，右侧占剩余空间 */
grid-template-rows: 60px 1fr; /* 顶部60px，剩余空间给内容区 */
height: 100vh; /* 占满整个视口高度 */
}
.sidebar {
grid-row: 1 / 3; /* 侧边栏占满两行 */
background-color: #2c3e50;
color: white;
padding: 20px;
}
.header {
background-color: #ecf0f1;
padding: 0 20px;
display: flex;
align-items: center;
}
.content {
padding: 20px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="admin-layout">
<div class="sidebar">侧边栏导航</div>
<div class="header">顶部导航栏</div>
<div class="content">主要内容区域</div>
</div>
</body>
</html>
Grid布局的注意事项
- Grid布局是二维布局，适合同时控制行和列的场景，如果是单方向的线性布局，优先选择flex布局更合适。
- fr单位只能用于grid相关的属性中，不能用于width、height等普通尺寸属性。
- 网格项目的浮动、垂直对齐等属性在Grid布局中会失效，不需要额外设置。
HTML_Gridgrid-template-columnsgrid-template-rowsgrid-gap网格布局修改时间：2026-06-20 14:09:30