【前端】CSS Grid布局介绍及示例
CSS Grid 简介
CSS Grid 是一个二维布局系统，专为处理行和列的复杂网页布局而设计。与 Flexbox（一维布局）不同，Grid 允许开发者同时控制行和列，实现更精确的布局结构。
核心概念：
- Grid 容器：通过
display: grid定义。 - Grid 项目：容器的直接子元素。
- 网格线（Grid Lines）：划分行列的线（从 1 开始编号）。
- 网格轨道（Grid Tracks）：行或列的间距（如
grid-template-columns）。 - 网格区域（Grid Areas）：合并单元格形成的矩形区域。
关键属性速查
| 容器属性 | 作用 |
|---|---|
grid-template-columns | 定义列宽（如 1fr 200px） |
grid-template-rows | 定义行高 |
grid-template-areas | 定义命名区域（配合 grid-area） |
gap | 行列间距（替代 grid-gap） |
justify-items | 项目水平对齐（start/end/center） |
align-items | 项目垂直对齐 |
| 项目属性 | 作用 |
|---|---|
grid-column-start/end | 控制列起始/结束位置 |
grid-row-start/end | 控制行起始/结束位置 |
grid-area | 指定项目所属命名区域 |
justify-self | 单个项目水平对齐 |
align-self | 单个项目垂直对齐 |
何时使用 Grid？
- 整体页面布局（Header/Footer/Sidebar 等区域）
- 二维复杂结构（同时控制行和列）
- 响应式网格系统（如卡片、画廊布局）
💡 Tips：
Grid 与 Flexbox 可协同使用！Grid 负责宏观布局，Flexbox 处理微观组件（如导航栏内部对齐）。
示例合集（含完整代码）
示例 1：基础网格布局
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 三列等宽 */grid-gap: 10px;padding: 15px;background: #f0f0f0;
}.grid-item {background: #4CAF50;color: white;padding: 30px;text-align: center;border-radius: 5px;
}
</style>
</head>
<body>
<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
</div>
</body>
</html>
示例 2：网格区域命名布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-gap: 10px;height: 300px;
}.header { grid-area: header; background: #FF9800;padding: 20px;
}
.sidebar { grid-area: sidebar; background: #2196F3;
}
.main { grid-area: main; background: #4CAF50;
}
.footer { grid-area: footer; background: #9C27B0;
}
</style>
</head>
<body>
<div class="container"><div class="header">Header</div><div class="sidebar">Sidebar</div><div class="main">Main Content</div><div class="footer">Footer</div>
</div>
</body>
</html>
示例 3：响应式自适应网格
<!DOCTYPE html>
<html>
<head>
<style>
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;padding: 20px;
}.item {background: #2196F3;height: 150px;display: flex;align-items: center;justify-content: center;color: white;font-size: 1.5rem;border-radius: 8px;
}
</style>
</head>
<body>
<div class="grid"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div>
</body>
</html>
示例 4：复杂定位与对齐
<!DOCTYPE html>
<html>
<head>
<style>
.grid {display: grid;grid-template-columns: 150px 1fr 100px;grid-template-rows: 100px 1fr 100px;height: 400px;background: #eee;gap: 10px;padding: 10px;
}.item-a {grid-column: 1 / 4; /* 跨3列 */background: #FF5722;display: grid;place-items: center;
}.item-b {grid-row: 2 / 4; /* 跨2行 */background: #3F51B5;
}.item-c {grid-column: 2 / 4;display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;
}.sub-item {background: #009688;display: flex;align-items: center;justify-content: center;
}
</style>
</head>
<body>
<div class="grid"><div class="item-a">Header (跨3列)</div><div class="item-b">Sidebar (跨2行)</div><div class="item-c"><div class="sub-item">内容1</div><div class="sub-item">内容2</div><div class="sub-item">内容3</div><div class="sub-item">内容4</div></div>
</div>
</body>
</html>
关键概念解析
-
容器属性：
display: grid：定义网格容器grid-template-columns/rows：定义列/行尺寸gap：设置网格间距grid-template-areas：命名网格区域
-
项目属性：
grid-column/row：控制项目位置grid-area：指定区域名称justify-self/align-self：单个项目对齐
-
响应式单位：
fr：剩余空间分配单位minmax()：定义尺寸范围auto-fill：自动填充列
CSS Grid 彻底改变了网页布局方式，通过组合这些特性，可以轻松实现传统布局难以完成的复杂设计。