【前端】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：基础网格布局

html 复制代码

<!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：网格区域命名布局

html 复制代码

<!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：响应式自适应网格

html 复制代码

<!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：复杂定位与对齐

html 复制代码

<!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 彻底改变了网页布局方式，通过组合这些特性，可以轻松实现传统布局难以完成的复杂设计。