当前位置：首页 > news >正文

【前端】CSS Grid布局介绍及示例

news 2025/8/2 7:21:00

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：自动填充列