CSS网格布局（CSS Grid）

### CSS 网格布局（CSS Grid）

CSS Grid 是一种强大的二维布局系统，能够轻松创建复杂的网页布局。它通过定义网格容器和网格项，实现对页面区域的划分和灵活的布局控制。

------

#### 1. CSS Grid 的基本概念

- **网格容器（Grid Container）**：通过设置 `display: grid` 或 `display: inline-grid`，将一个元素定义为网格容器。
- **网格项（Grid Items）**：网格容器内的直接子元素。
- **网格线（Grid Lines）**：构成网格结构的水平或垂直分割线。
- **网格轨道（Grid Tracks）**：两条相邻网格线之间的空间，即行或列。
- **网格单元格（Grid Cells）**：由两条水平网格线和两条垂直网格线围成的空间。
- **网格区域（Grid Areas）**：由一个或多个网格单元组成的矩形区域。

------

#### 2. 定义网格容器和网格项

##### （1）定义网格容器

通过设置 `display: grid` 或 `display: inline-grid`，创建一个网格容器。

css复制

```css
.container {
    display: grid;
    grid-template-columns: 100px 1fr 200px; /* 定义三列 */
    grid-template-rows: auto 100px; /* 定义两行 */
    gap: 10px; /* 设置行间距和列间距 */
}
```

##### （2）定义网格项

网格容器内的直接子元素自动成为网格项。可以通过 `grid-column` 和 `grid-row` 属性控制网格项的布局。

css复制

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

.item2 {
    grid-column: 3;
    grid-row: 1 / 3; /* 从第1行到第3行 */
}
```

------

#### 3. 网格线、网格轨道和网格区域

- **网格线**：可以通过 `grid-column-start`、`grid-column-end`、`grid-row-start` 和 `grid-row-end` 属性指定网格项的起始和结束位置。
- **网格轨道**：通过 `grid-template-columns` 和 `grid-template-rows` 定义列和行的大小。
- **网格区域**：可以通过 `grid-area` 属性为网格项指定一个区域。

css复制

```css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
}

.item1 {
    grid-area: 1 / 1 / 3 / 3; /* 从第1行第1列到第3行第3列 */
}
```

------

#### 4. 布局案例分析

##### （1）简单的两列布局

css复制

```css
.container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 左侧占1份，右侧占3份 */
    gap: 10px;
}

.sidebar {
    background: #ccc;
    padding: 20px;
}

.main {
    background: #eee;
    padding: 20px;
}
```

##### （2）复杂的页面布局

css复制

```css
.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    gap: 20px;
}

header {
    grid-area: header;
    background: #f8f8f8;
    padding: 20px;
}

main {
    grid-area: main;
    background: #e0e0e0;
    padding: 20px;
}

aside {
    grid-area: sidebar;
    background: #d0d0d0;
    padding: 20px;
}

footer {
    grid-area: footer;
    background: #b0b0b0;
    padding: 20px;
}
```

##### （3）响应式布局

css复制

```css
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
```

------

#### 5. 总结

CSS Grid 是一种强大的二维布局工具，适用于复杂页面布局和响应式设计。通过定义网格容器和网格项，以及灵活使用网格线、网格轨道和网格区域，可以轻松实现各种复杂的布局效果。