---
title: "IT课程 CSS基础 031_网格布局 Grid"
date: 2024-02-15T19:40:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "css网格", "css grid", "grid", "网格"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-031/
author: 赵健
---

### 网格布局 Grid

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的**列（column）** 与 **行（row）**，以及行与行、列与列之间的间隙，这个间隙一般被称为**沟槽（gutter）**。

![示例效果](/uploads/2024/02/20240129234701.png)

##### 基本概念

Grid 布局由以下几个基本概念组成：

- **网格容器 (grid container)**：网格布局由网格容器和网格项组成。网格容器是将网格项放置到网格中的容器。网格容器可以是任何元素，但通常使用 `div` 元素。
- **网格项 (grid item)**：网格项是放置在网格容器中的元素。网格项可以是任何元素，但通常使用 `div` 元素。
- **网格线 (grid line)**：网格线是将网格容器划分为行和列的线。网格线可以是水平线或垂直线。
- **网格列 (grid column)**：网格列是网格容器中垂直方向的线。
- **网格行 (grid row)**：网格行是网格容器中水平方向的线。
##### 常用属性

**网格容器属性**

网格容器具有以下属性用于控制网格布局：

- `display`: 设置网格容器的显示模式。网格容器必须设置为 `display: grid` 或 `display: inline-grid` 才能使用网格布局。
- `grid-template-columns`: 设置网格容器的列数和列宽（使用`fr`、`px`、`em` 等单位）。
- `grid-template-rows`: 设置网格容器的行数和行高（使用`fr`、`px`、`em` 等单位）。
- `grid-template`: 同时设置 `grid-template-columns` 和 `grid-template-rows`。
- `grid-auto-columns`: 设置网格容器的列宽。
- `grid-auto-rows`: 设置网格容器的行高。

**网格项属性**

网格项具有以下属性用于控制网格项在网格中的布局：

- `grid-column`: 设置网格项所在的列。
- `grid-row`: 设置网格项所在的行。
- `grid-column-start`: 设置网格项在列中的起始位置。
- `grid-column-end`: 设置网格项在列中的结束位置。
- `grid-row-start`: 设置网格项在行中的起始位置。
- `grid-row-end`: 设置网格项在行中的结束位置。
- `grid-area`: 设置网格项所在的区域。
- `grid-gap`: 设置网格线之间的间距。

##### 网格布局

定义固定和自适应的列宽、行宽

示例：

```css
.grid-example{
    display: grid;
    grid-template-columns: 100px 200px auto; 
    /* 第一列100px，第二列200px，剩余空间分配给自适应列 */
    grid-template-rows: 100px 200px auto; 
    /* 第一行100px，第二行200px，剩余空间分配给自适应行 */
}
.item{
    margin: 10px;
    background-color: rgb(100, 150, 200);
}
```

```html
    <div class="grid-example">
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_ZTfLPXtPau.png)
使用百分比定义列宽、行宽

示例：

```css
.grid-example{
    display: grid;
    grid-template-columns: 30% 2fr 1fr; 
    /* 第一列占30%，第二列占剩余空间的两份，第三列占剩余空间的一份 */
    grid-template-rows: 30% 2fr 1fr; 
    /* 第一行占30%，第二行占剩余空间的两份，第三行占剩余空间的一份 */
}
.item{
    margin: 10px;
    background-color: rgb(100, 150, 200);
}
```

```html
    <div class="grid-example">
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_JF0VEBlGHq.png)
等分（平均分配）列宽、行宽

示例：

```css
.grid-example{
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    /* 三等分列，每列占据剩余空间的一份 */
    grid-template-rows: repeat(3, 1fr); 
    /* 三等分行，每行占据剩余空间的一份 */
}
.item{
    margin: 10px;
    background-color: rgb(100, 150, 200);
}
```

```html
    <div class="grid-example">
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_at4QjrEwO6.png)
使用 `minmax` 定义列、行的最小和最大宽度、高度

示例：

```css
.grid-example{
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr); 
    /* 第一列最小宽度100px，占剩余空间的一份；第二列最小宽度200px，占剩余空间的两份 */
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr); 
    /* 第一行最小高度100px，占剩余空间的一份；第二行最小高度200px，占剩余空间的两份 */
}
.item{
    margin: 10px;
    background-color: rgb(100, 150, 200);
}
```

```html
    <div class="grid-example">
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_5yMKELAnj2.png)
##### 网格间隙

网格间隙由 `grid-row-gap` 和 `grid-column-gap` 两个属性来控制。另外，CSS Grid Level 2 中引入了 `gap` 属性，可以同时控制  `grid-row-gap` 和 `grid-column-gap` 

示例：

```css
.grid-example{
    display: grid;
    grid-template-columns: 30% 30% 30%; 
    grid-template-rows: 200px 200px; 
    grid-row-gap: 50px; /* 行间隙为50px */
    grid-column-gap: 30px; /* 列间隙为30px */
    /* gap: 50px 30px; 行间隙为50px，列间隙为30px */
}
.item{
    margin: 10px;
    background-color: rgb(100, 150, 200);
}
```

```html
    <div class="grid-example">
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
        <div class="item">Grid演示</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_ruJL1s14Zq.png)
##### 网格定位

网格定位通常指的是使用 `grid-column`、`grid-row`、以及 `grid-area` 这些属性来定位网格布局中的项目。这些属性用于指定项目在网格中所占的列和行，或者直接指定项目所在的区域。

- `grid-column` 是用于设置一个网格项横跨的列的属性。它是 `grid-column-start` 和 `grid-column-end` 的简写。通过 `grid-column`，你可以更方便地定义网格项在水平方向上的位置和跨足的列数。
- `grid-row` 是用于设置一个网格项横跨的行的属性。它是 `grid-row-start` 和 `grid-row-end` 的简写。通过 `grid-row`，你可以更方便地定义网格项在垂直方向上的位置和跨足的行数。
- `grid-area` 属性是一个用于同时设置 `grid-row-start`、`grid-column-start`、`grid-row-end` 以及 `grid-column-end` 属性的简写属性。通过 `grid-area`，你可以更直观地定义一个网格项在网格布局中的位置和大小。

示例：

```css
.example {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 定义3列，每列占1份空间 */
    grid-template-rows: repeat(2, 150px);
    /* 定义2行，每行高度为150px */
    gap: 10px;
    padding: 20px;
}
.item {
    background-color: #f2f2f2;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
}
/* 使用 grid-column 和 grid-row 定位 */
.item1 {
    grid-column: 1 / 3; /* 从第1列到第3列(1+2列) */
    grid-row: 1 / 2;    /* 从第1行到第2行(1行) */
}
/* 使用 grid-area 定位 */
.item2 {
    grid-area: 2 / 2 / 3 / 4; /* 从第2行第2列到第3行第4列(2行)(2+3列) */
}
```

```html
<div class="example">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>
```

效果：

![示例效果](/uploads/2024/02/msedge_FoY36imcLK.png)


示例：

```css
body {
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* 定义两列，第一列占一份，第二列占两份 */
    grid-template-rows: auto;
    /* 定义行高度，第一行和第三行高度由内容决定，第二行占剩余空间 */
    grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
    /* 定义区域布局，每个区域由一个字符串表示，空格分隔单元格，换行表示新的行 */
    min-height: 100vh;
    /* 设置最小高度，确保内容高度小于视口时，仍然能看到 footer */
}

.header {
    grid-area: header;
    /* 将 .header 放置到名为 "header" 的区域 */
    background-color: #333;
    color: #fff;
    padding: 10px;
}

.sidebar {
    grid-area: sidebar;
    /* 将 .sidebar 放置到名为 "sidebar" 的区域 */
    background-color: #f2f2f2;
    padding: 10px;
}

.main {
    grid-area: main;
    /* 将 .main 放置到名为 "main" 的区域 */
    padding: 10px;
}

.footer {
    grid-area: footer;
    /* 将 .footer 放置到名为 "footer" 的区域 */
    background-color: #333;
    color: #fff;
    padding: 10px;
}
```

```html
    <div class="container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">
          <h1>Main Content</h1>
          <p>This is the main content area.</p>
        </div>
        <div class="footer">Footer</div>
    </div>
```

效果：

![示例效果](/uploads/2024/02/msedge_warPTZQxZE.png)