Grid布局 - Ivo's Inkwell

872 字

4 分钟

Grid布局

2026-03-15

Web前端笔记

无标签

这个布局之前我在写微信小程序的时候是非常喜欢的一个，毕竟我是一个喜欢规整布局的人。所以一开始就学了不少Grid布局的属性，在Flex布局中我确实漏学了不少知识，但是Grid学下来却发现好像除了基础的术语，还真的学的差不多了。

概念#

Grid布局元素：

Grid容器：采用Grid布局的元素，作为父元素
Grid项目：Grid布局内的子元素

Grid容器中有以下两个基本的概念：

块轴（block axis）：垂直方向
行内轴（inline axis）：水平方向

Grid项目概念：

Grid项目主要是操作项目在整个网格中的位置，很多整体布局都是使用这个方法快速搭建出一个页面，这样能保证在不同设备上看到的结构是完全等比例的。

容器#

属性#

grid-template
gap
justify-content
align-content

书写格式#

`grid-template`#

这个属性是一个复合属性，由两个属性组成的，分别是grid-template-rows和grid-template-columns组成，写法如下：

1
.grid-container {
2
    grid-template: [grid-template-rows] / [grid-template-columns];
3
}

grid-template-rows和grid-template-columns的示例写法如下：

1
.grid-container {
2
    grid-template-rows: 1fr 1fr 1fr; /* 均分三行，占满父容器 */
3
    grid-template-rows: repeat(3, 1fr); /* 与上面的写法等价 */
4
    grid-template-rows: 200px 1fr 1fr; /* 第一行200px，剩余空间均分两行，占满父容器 */
5
    grid-template-rows: 200px repeat(2, 1fr); /* 与上面的写法等价 */
6
}

1
.grid-container {
2
    grid-template-columns: 1fr 1fr 1fr; /* 均分三行，占满父容器 */
3
    grid-template-columns: repeat(3, 1fr); /* 与上面的写法等价 */
4
    grid-template-columns: 200px 1fr 1fr; /* 第一列200px，剩余空间均分两列，占满父容器 */
5
    grid-template-columns: 200px repeat(2, 1fr); /* 与上面的写法等价 */
6
}

如果写一个3×3的网格布局可以有一下两种等价写法：

1
.grid-container {
2
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
3
}

1
.grid-container {
2
    grid-template-rows: repeat(3, 1fr);
3
    grid-template-columns: repeat(3, 1fr);
4
}

`gap`#

这也是一个复合属性，由两个属性组成的，分别是row-gap和column-gap组成，写法如下：

1
.grid-container {
2
    gap: [row-gap] [column-gap];
3
}

gap控制行列间距都是10px的示例写法如下：

1
.grid-container {
2
    gap: 10px 10px;
3
}

等价于以下写法：

1
.grid-container {
2
    gap: 10px;
3
}

justify-content和align-content属性与Flex布局一致

项目#

属性#

grid-row
grid-column
grid-area

书写格式#

`grid-row`#

这也是一个复合属性，由两个属性组成，分别是grid-row-start和grid-row-end组成，写法如下：

1
.grid-item {
2
    grid-row: [grid-row-start] / [grid-row-end];
3
}

假设一个场景，控制一个项目宽2个单元格，起始为第三条网格线。

1
.grid-item {
2
    grid-row-start: 3;
3
    grid-row-end: 5;
4
}

等价于以下写法：

1
.grid-item {
2
    grid-row: 3 / 5;
3
}

`grid-column`#

这也是一个复合属性，由两个属性组成，分别是grid-column-start和grid-column-end组成，写法如下：

1
.grid-item {
2
    grid-column: [grid-column-start] / [grid-column-end];
3
}

假设一个场景，控制一个项目长3个单元格，起始为第三条网格线。

1
.grid-item {
2
    grid-row-start: 3;
3
    grid-row-end: 6;
4
}

等价于以下写法：

1
.grid-item {
2
    grid-column: 3 / 6;
3
}

`grid-area`#

这也是一个复合属性，将grid-row和grid-column这两个属性合并到一起，写法如下：

1
.grid-item {
2
    grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];
3
}

实践案例：

简单的网页页面排版：

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <style>
5
      * {
6
        margin: 0;
7
        padding: 0;
8
      }
9
      .container {
10
        width: 80%;
11
        height: 80vh;
12
        margin: 10px auto 0;
13
        box-sizing: border-box;
14
      }
15
      .header,
16
      .main,
17
      .sidebar,
18
      .footer {
19
        display: flex;
20
        justify-content: center;
21
        align-items: center;
22
        font-size: 1.5em;
23
        color: #fff;
24
        border-radius: 8px;
25
      }
26
      .header {
27
        background-color: #667eea;
28
      }
29
      .main {
30
        background-color: #43e97b;
31
      }
32
      .sidebar {
33
        background-color: #ea7a9a;
34
      }
35
      .footer {
36
        background-color: #30cfd0;
37
      }
38
      /* Grid布局 */
39
      .container {
40
        display: grid;
41
        grid-template: 80px 1fr 60px / 2fr 1fr;
42
        gap: 10px;
43
      }
44
      .header {
45
        grid-column: 1 / -1;
46
      }
47
      .footer {
48
        grid-column: 1 / -1;
49
      }
50
    </style>
51
  </head>
52
  <body>
53
    <div class="container">
54
      <div class="header">Header</div>
55
      <div class="main">Main Content</div>
56
      <div class="sidebar">Sidebar</div>
57
      <div class="footer">Footer</div>
58
    </div>
59
  </body>
60
</html>