grid布局 - 翔子的博客

概述#

Grid 布局是目前最强大的布局工具，将网页划分为一个个网格，可以任意组合，达到各种布局效果

与 Flex 布局区别：Flex 是一维布局，只能在设置的轴线上进行布局；而 Grid 是二维布局，将容器划给为行和列，产生单元格

使用网格布局，兄弟节点可以被指定布局到网格的某个位置。所以，网格布局相对流布局 Flex 布局更加的灵活，当然学习和使用也更加复杂。这篇文章会把网格布局中的概念和属性整理出来。下图就是展示了一维布局和二维布局的不同。可以看出，如果布局复杂，一维布局需要增加节点来解决；而二维布局，则不需要，这也是网格布局强大而复杂的原因。

名词解释#

容器 container：设置display: grid的元素称为容器
项目 item：内部的子元素称为项目
行 row：容器中的水平区域
列 column：容器中的垂直区域
单元格 cell：行和列的交叉点，n 行 m 列将产生 n * m 个单元格
网格线 grid line：划分网格的线，n 行有 n + 1 根水平网格线，m 列有 m + 1 根垂直网格线

属性#

属性分为容器属性和项目属性

容器属性#

display

通过设置display: grid或display: inline-grid生成一个网格容器

grid-template-rows/grid-template-columns

划分行和列，既可以用绝对宽度也可以用百分比，下面代码将 div 划分为 200px3 行 33%高度的容器

1
.container {
2
  display: grid;
3
  grid-template-rows: 200px 200px 200px;
4
  grid-template-columns: 33% 33% 33%;
5
}

可以使用 repeat 简化代码

1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(3, 200px);
4
  grid-template-rows: repeat(3, 33.33%);
5
}

auto-fill 属性，当单元格大小固定，容器大小不固定时，希望每行/每列容纳尽可能多的单元格，使用 auto-fill 属性自动填充
```
1
.container {
2
  display: grid;
3
  grid-template-columns: repeat(auto-fill, 200px);
4
}
```

fr 比例：方便表示比例关系，如列宽 1fr 2fr 就代表后者是前者的两倍

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr 2fr;
4
  /* 可以与绝对长度结合 */
5
  grid-template-columns: 150px 1fr 2fr;
6
  /* 传统的栅格布局可以使用fr轻松实现  */
7
  grid-template-columns: repeat(12, 1fr);
8
}

minmax()产生长度范围，表示长度在此范围内

1
.container {
2
  display: grid;
3
  /* 列宽不小于100px，不大于1fr */
4
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
5
}

auto 由浏览器自动决定长度

1
.container {
2
  display: grid;
3
  grid-template-columns: 100px auto 100px;
4
}

grid-row-gap/grid-column-gap、grid-gap

行/列间隔

1
.container {
2
  display: grid;
3
  grid-row-gap: 20px;
4
  grid-row-gap: 20px;
5
  /* 相当于  */
6
  grid-column: 20px 20px;
7
}

grid-template-areas

用于定义区域

1
.container {
2
  display: grid;
3
  grid-template-areas:
4
    'header header header'
5
    'main main sidebar'
6
    'footer footer footer';
7
}

grid-auto-flow

容器内元素的摆放顺序，默认先行后列，可以使用grid-auto-flow: column;调整为先列后行

1
// 先行后列渲染结果如下所示
2
1 2 3
3
4 5 6
4
7 8 9
5
// 先列后行渲染结果如下所示
6
1 4 7
7
2 5 8
8
3 6 9

justify-items/align-items、place-items

justify-items/align-items 用于设置单元格内容的水平位置

1
.container {
2
  display: grid;
3
  justify-items: start;
4
  align-items: start;
5
  /*相当于  */
6
  place-items: start start;
7
}

justify-content/align-content、place-content

定义整个内容区域在容器内的水平位置

1
.container {
2
  display: grid;
3
  justify-content: center;
4
  align-content: center;
5
  /* 相当于 */
6
  place-content: center center;
7
}

项目属性#

grid-column-start/grid-column-end/grid-row-start/grid-row-end

项目的位置可以指定

1
 grid-column-start属性：左边框所在的垂直网格线
2
 grid-column-end属性：右边框所在的垂直网格线
3
 grid-row-start属性：上边框所在的水平网格线
4
 grid-row-end属性：下边框所在的水平网格线

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

justify-self/align-self

设置单元格内容的水平/垂直位置，跟 justify-items/align-items 属性的用法完全一致，但只作用于单个项目

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Document</title>
8
    <style>
9
      .container {
10
        margin: 60px;
11
        display: grid;
12
        grid-template-rows: repeat(3, 200px);
13
        grid-template-columns: repeat(3, 200px);
14
        /* 列宽度确定 自动布局 */
15
        /* grid-template-columns: repeat(auto-fill, 200px); */
16
        /* 行高 1 150 2 300 3 450 */
17
        /* grid-template-rows: 180px 1fr 2fr; */
18
        grid-gap: 20px;
19
        justify-items: start;
20
        align-items: center;
21
        justify-content: center;
22
      }
23

24
      .item {
25
        text-align: center;
26
        font-size: 200%;
27
        color: #fff;
28
        width: 80%;
29
        height: 80%;
30
      }
31

32
      .one {
33
        background-color: #b8e8e0;
34
        justify-self: center;
35
        align-self: center;
36
        grid-column-start: 1;
37
        grid-column-end: 3;
38
        grid-row-start: 2;
39
        grid-row-end: 4;
40
      }
41

42
      .two {
43
        background-color: #8cc7b5;
44
      }
45

46
      .three {
47
        background-color: #efe3bf;
48
      }
49

50
      .four {
51
        background-color: #bee7e9;
52
      }
53

54
      .five {
55
        background-color: #e6ceac;
56
      }
57

58
      .six {
59
        background-color: #e7d7d9;
60
      }
61
      .seven {
62
        background-color: #aa53975c;
63
      }
64
      .eight {
65
        background-color: #bde6b8;
66
      }
67
      .nine {
68
        background-color: #e6c1b8;
69
      }
70
    </style>
71
  </head>
72

73
  <body>
74
    <div class="container">
75
      <div class="one item">1</div>
76
      <div class="two item">2</div>
77
      <div class="three item">3</div>
78
      <div class="four item">4</div>
79
      <div class="five item">5</div>
80
      <div class="six item">6</div>
81
      <div class="seven item">7</div>
82
      <div class="eight item">8</div>
83
      <div class="nine item">9</div>
84
    </div>
85
  </body>
86
</html>

音乐

音乐

概述#

名词解释#

属性#

容器属性#

项目属性#

音乐

文章目录