CSS网格布局：创建复杂的布局结构

# 1. 简介

## 1.1 什么是CSS网格布局

CSS网格布局（CSS Grid Layout）是一种用于创建多维网格布局的CSS模块。它允许开发者以简洁、灵活的方式来定义网格容器和网格项的布局和排列。

## 1.2 为什么要使用CSS网格布局

CSS网格布局相比传统的基于盒模型的布局，提供了更加直观和强大的布局机制。它可以轻松地实现复杂的布局，同时还可以自由调整和改变网格项的大小、位置和间隙，以适应不同的页面布局。

## 1.3 CSS网格布局的基本概念

在使用CSS网格布局之前，需要了解一些基本概念：

- 网格容器（Grid Container）：用于包裹网格项的容器，通过设置网格属性来定义整个布局的结构。
- 网格项（Grid Item）：网格布局中的每个子元素都被视为一个网格项，可以在网格容器中放置并进行布局。
- 网格线（Grid Line）：网格线是网格项的边界线，可以是水平线或垂直线，用于划分网格区域。
- 网格轨道（Grid Track）：网格线之间的空间被称为网格轨道，分为行轨道和列轨道。
- 网格单元（Grid Cell）：每个网格轨道交叉形成的矩形区域称为网格单元，即网格项所占据的空间。

## 创建网格容器

### 3. 定位和调整网格项

在这一章节中，我们将学习如何定位和调整CSS网格布局中的网格项。

#### 3.1 网格项的放置方式

在CSS网格布局中，可以使用 `grid-column` 和 `grid-row` 属性来控制网格项的放置方式。这两个属性可以指定网格项的起始线和结束线，从而确定网格项在网格中的位置。例如：

.item1 {
  grid-column: 1 / 3;  /* 从第1列到第3列 */
  grid-row: 1 / 2;     /* 从第1行到第2行 */
}

#### 3.2 网格项的大小调整

通过使用 `grid-column` 和 `grid-row` 属性，可以控制网格项在网格中的位置，并且通过 `grid-column-span` 和 `grid-row-span` 属性，可以调整网格项占据的列数和行数。例如：

.item2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  grid-column-span: 2;  /* 占据2列 */
  grid-row-span: 1;     /* 占据1行 */
}

#### 3.3 网格项的间隙设置

通过使用 `grid-column-gap` 和 `grid-row-gap` 属性，可以在网格布局中设置网格项之间的列间隙和行间隙。例如：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  grid-column-gap: 20px;  /* 列间隙为20像素 */
  grid-row-gap: 10px;     /* 行间隙为10像素 */
}

### 4. 创建复杂布局

在CSS网格布局中，我们可以创建各种复杂的布局，包括多行和多列的网格布局，以及跨行和跨列的网格项。此外，我们还可以通过自适应和响应式的方式来实现布局的灵活性和适应性。

#### 4.1 多行和多列网格布局

在网格容器中，我们可以使用`grid-template-rows`属性来定义网格行的数量和高度，使用`grid-template-columns`属性来定义网格列的数量和宽度。

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; /* 定义两行，分别为100px和200px高度 */
  grid-template-columns: 1fr 2fr; /* 定义两列，比例为1:2 */
}

在上面的例子中，我们定义了一个网格容器，它包含两行和两列。第一行的高度为100px，第二行的高度为200px。第一列的宽度为网格容器宽度的1/