CSS Grid教程

封面图 • 2026-04-11 • Html/Css

当然！CSS Grid 是一种强大的布局系统，用于创建二维网格布局（行和列）。它比传统的 Flexbox 更适合处理复杂的页面布局。以下是一个 **CSS Grid 的基础教程**，帮助你快速上手。

---

## 🧩 一、CSS Grid 简介

CSS Grid 是 CSS3 中引入的一种布局方式，允许你通过定义“行”和“列”来控制网页的布局结构。它适用于整个容器中的子元素（称为 **grid items**）。

---

## 📌 二、基本概念

### 1. **Grid Container（网格容器）**
- 一个具有 `display: grid` 或 `display: inline-grid` 的元素。
- 它包含所有子元素（即网格项）。

### 2. **Grid Items（网格项）**
- 网格容器的直接子元素。

### 3. **Grid Lines（网格线）**
- 分隔网格行和列的线条（可以是虚线或实线）。

### 4. **Grid Cells（网格单元格）**
- 行和列交叉形成的最小单位。

### 5. **Grid Tracks（网格轨道）**
- 每一行或每一列称为一个轨道。

### 6. **Grid Gaps（网格间距）**
- 行与列之间的空间。

---

## 🛠 三、常用属性

### 1. **设置为网格容器**
```css
.container {
  display: grid;
}
```

### 2. **定义列和行**
```css
.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr; /* 三列：100px, 200px, 剩余空间 */
  grid-template-rows: 50px 100px;         /* 两行：50px, 100px */
}
```

### 3. **自动排列**
```css
.container {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
}
```

### 4. **设置间隙**
```css
.container {
  gap: 10px; /* 同时设置行和列的间隙 */
  row-gap: 10px;
  column-gap: 20px;
}
```

### 5. **对齐方式**
```css
.container {
  justify-items: center;   /* 水平对齐 */
  align-items: center;      /* 垂直对齐 */
  justify-content: center;  /* 整个网格水平居中 */
  align-content: center;    /* 整个网格垂直居中 */
}
```

---

## 🧩 四、使用 Grid 布局

### 示例：创建一个简单的 3x2 网格
```html
<div class="container">
  <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>
```

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，每列等宽 */
  grid-template-rows: repeat(2, 100px);  /* 2 行，每行 100px */
  gap: 10px;
}

.item {
  background-color: lightblue;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

---

## 🧩 五、进阶功能

### 1. **命名区域（Named Grid Areas）**
```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "header header header"
    "main sidebar sidebar";
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
```

### 2. **自动放置（Auto-placement）**
默认情况下，浏览器会自动将子元素按顺序放入网格中。

### 3. **指定位置**
```css
.item {
  grid-column: 2 / 4;   /* 跨第 2 到第 4 列 */
  grid-row: 1 / 3;      /* 跨第 1 到第 3 行 */
}
```

### 4. **响应式设计**
使用媒体查询 + `grid-template-columns` 实现响应式布局：
```css
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
```

---

## 🧩 六、常见用法场景

| 场景 | 说明 |
|------|------|
| 网站布局 | 使用 `grid-template-areas` 创建头部、侧边栏、内容区等 |
| 图片画廊 | 用 `repeat(auto-fit, minmax(...))` 自适应图片布局 |
| 表单布局 | 将表单字段对齐成多列 |

---

## 🧩 七、参考资源

- [MDN - CSS Grid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout)
- [CSS Grid Layout by W3Schools](https://www.w3schools.com/css/css_grid.asp)
- [Grid by Example](https://gridbyexample.com/)

---

如果你有具体的应用场景或问题，比如“如何实现一个响应式的网格布局？”或者“如何让某个元素跨列显示？”，欢迎继续提问！我可以提供更详细的示例。