Grid网格布局

本文已参与「新人创作礼」活动，一起开启掘金创作之路

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，
然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

指定一个容器采用网格布局。
*注意，设为网格布局以后，容器子元素（项目）
的float、display: inline-block、display: table-cell、vertical-align和column-等设置都将失效。

div {
  display: grid;
}
div {
  display: inline-grid; 
  /* 默认情况下，容器元素都是块级元素，但也可以设成行内元素。 */
}

1
2
3
4
5
6
7
8

基本概念

容器和项目：采用网格布局的区域，称为"容器"（container）。
容器内部采用网格定位的子元素，称为"项目"（item）。
行和列：容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
单元格：行和列的交叉区域，称为"单元格"（cell）。
网格线：划分网格的线，称为"网格线"（grid line）。
水平网格线划分出行，垂直网格线划分出列。
1
2
3
4
5
6

容器属性

容器指定了网格布局以后，接着就要划分行和列。

#grid-template-columns (列宽)
grid-template-columns属性定义每一列的列宽

#grid-template-rows (行高)
grid-template-rows属性定义每一行的行高。
1
2
3
4
5

/* 指定一个三行三列的网格，列宽和行高都是100px */
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

/* 也可以使用百分百单位*/
.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

/* 1.repeat(count, content)  重复
 * 第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
 */
grid-template-columns: repeat(2, 100px 20px 80px);
/* 等价于 grid-template-columns: 100px 20px 80px 100px 20px 80px */
grid-template-rows: repeat(3, 33.33%);
/* 等价于 grid-template-rows: 33.33% 33.33% 33.33%; */

/**
 * 2.auto-fill 关键字  自动填充
 * 单元格的大小是固定的，但是容器的大小不确定。
 * 如果希望每一行（或列）容纳尽可能多的单元格，可以使用auto-fill关键字表示自动填充。
 */
 .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  /* 每列宽度100px，然后自动填充，直到容器不能放置更多的列。 */
}

/**
 * 3.fr 关键字，（fraction 的缩写，意为"片段"） 表示比例
 * 1fr和2fr，就表示后者是前者的两倍。
 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列相同宽度 */
  grid-template-columns: 150px 1fr 2fr;
  /* 第一列的宽度为150像素，第二列的宽度是第三列的一半。 */
}

/**
 * 4.minmax() 范围
 * minmax(min, max)函数产生一个长度范围，表示长度就在这个范围之中。
 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  /* minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。 */
}

 /**
  * 5.auto关键字
  * 表示由浏览器自己决定长度。
  */
.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

/**
 * 6.网格线名称
 * 可以使用方括号，指定每一根网格线的名字，方便以后的引用。
 */
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
  /* 指定网格布局为3行3列，有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。 */
}

/* 例子1：
 * grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。
 */
.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

/* 例子2：
 * 传统的十二网格布局，写起来也很容易。
 */
 .wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

grid-row-gap (行间距)

grid-row-gap属性设置行与行的间隔（行间距）
1

grid-column-gap (列间距)

grid-column-gap属性设置列与列的间隔（列间距）。
1

#grid-gap (行间距加列间距)

.container {
  display: grid;
  grid-row-gap: 20px; /* 等价于 row-gap: 20px */
  grid-column-gap: 20px; /* 等价于 column-gap: 20px */
}

/* grid-gap:  ; */
.container {
  display: grid;
  grid-gap: 20px 20px; /*等价于 gap: 20px 20px */
}

/* 如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。 */
1
2
3
4
5
6
7
8
9
10
11
12
13

grid-template-areas (标记单元格)

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 划分出9个单元格，将其命名为a到i的九个区域，分别对应这九个单元格。 */
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

  /* 多个单元格合并成一个区域的写法 */
  grid-template-areas: 'a a a'
                       'b b b'
                       'c c c';

  /* 布局实例 */
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";

  /* 如果某些元素不需要利用，以.来代替 */
  grid-template-areas: 'a . c'
                       'd . f'
                       'g . i';

  /* 区域的命名会影响到网格线。
  每个区域的起始网格线，会自动命名为区域名-start，
  终止网格线自动命名为区域名-end */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

士例

<!DOCTYPE html>

  
    "utf-8">