本篇博客简略记录一下Grid布局的使用。博主本人为前端菜鸡，不建议想通过本篇博文习得高深知识的朋友观看。
GRID
首先介绍一下Grid是什么，因博主本人没文化，只能说这东西是个网格，其具体特性是网格中的每个单元格都可以控制大小，比如在一个3x3的网格中，你可以让某个单元格为2x2，也可以让某个单元格1x2，等。
只说这些难免让人感到懵比，所以下面讲一些使用方法。
创建网格
创建一个3*3的网格，代码如下:
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
| <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
article div{
border: 1px solid black;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</article>
</body>
</html>
|
效果如下:
请忽略这透明的效果，这是因为我的compton，和这代码并没有关系。
那么接下来开始代码讲解。
最重要的一点在于”display: grid”这行代码，其作用为将元素设置为网格。
然后说一下”grid-template-columns”的意思，这个是网格的列数，”1fr 1fr 1fr”代表3列，你可以把1fr认为是一个基本大小，就如1px一样，只不过px是用来衡量像素，fr是用来衡量单元格，因此，当”grid-template-columns: 1fr 2fr 1fr”时，第二个单元格的列宽为第一个单元格或第三个单元格的列宽的两倍。 “grid-template-rows”也是同样的计量方法，不过含义从列变成了行。
通过”grid-template-columns: 1fr 1fr 1fr”和”grid-template-rows: 1fr 1fr 1fr”，创建了一个3x3的网格，该网格共有9个单元格，每个单元格的行高和列宽都是1fr。
可以看到，在article元素中，有9个div，不要以为是这9个div撑起了grid，而是9个单元格作为容器，各容纳了一个div。也就是说，div和这个网格的布局没有任何关系，它是在单元格之中，不管单元格中有没有这个div，这个单元格仍然会存在，所以无论有多少个div，只要div的个数不大于9，就不会对布局产生影响。比如article元素中一共有8个div，那么最后一个单元格中不会有任何东西，但是它仍然占据了一个单元格的位置。
操作单元格的大小
我们可以通过”grid-column-start”和”grid-column-end”来操作某个单元格所占据的列的个数，也可以通过”grid-row-start”和”grid-row-end”来操作某个单元格所占据的行的个数。
在操作之前，我们需要先知道一件事，在上面的代码中，我们创建了一个3x3的网格，而这个网格，从左到右一共有4条线。这四条线分别是: 第一个单元格的左边框，第一个单元格的右边框与第二个单元格的左边框，第二个单元格的右边框与第三个单元格的左边框，第三个单元格的右边框与第四个单元格的左边框，第四个单元格的右边框。而且这个单元格从上到下一共也是4条线，逻辑与从左到右相同。
不理解这个概念也没关系，看了下面代码就理解了。
这里我要让第一行的第二个单元格成为2x2的单元格，即占据两行两列的单元格。代码如下(该实现方法为方法一):
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
margin: auto;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat (3, 1fr);
}
article div{
border: 1px solid black;
}
article div:nth-child(2){
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</article>
</body>
</html>
|
效果图如下:
这里我使用了”article div:nth-child(2)”选中了第二个div，然后通过”grid-row-start: 1; grid-row-end: 3;”设置了行高，通过”grid-column-start: 2; grid-column-end: 4;”设置了列宽。其中的”1 3 2 4”这几个参数对应了我上面描述的”4条线”。
理解完了这个之后，我们再来看一下上面我所写的stle标签中的”article”元素选择器中的”repeat”，repeat主要用于手懒，比如你要创建一个n x n的表格，那你就要写n个fr，勤奋的程序员肯定忍受不了这个情况，所以repeat可以避免这种情况的出现。repeat的用法为: repeat(n, u) 其中n代表重复的个数，u代表单位，u可以是1fr也可以是2fr也可以是1px也可以是2px等。在repeat之后还可以跟其他单位，如: “grid-template-rows: repeat(2, 1fr) 1fr”。
接下来我将介绍其他几种实现上面布局的方法，但由于我这篇博客已经写了一个多小时了，所以接下来就不贴图片了，反正样子都一样。
方法二(只改动了”article div:nth-child(2)”中的内容，其他代码与方法一相同): 只设置要改变的单元格方向的对应的end属性，span 2代表该单元格为该方向上两个单元格的大小(如column方向使用这个，代表两个列宽，row使用这个，代表两个行高)。
1
2
3
4
| article div:nth-child(2){
grid-row-end: span 2;
grid-column-end: span 2;
}
|
方法三(改动了article元素选择器与article div:nth-child(2)):为每一条边设置名字，使用的时候使用边名。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| article{
margin: auto;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: [c1-start] 1fr [c1-end c2-start] 1fr [c2-end c3-start] 1fr [c3-end];
grid-template-rows: [r1-start] 1fr [r1-end r2-start] 1fr [r2-end r3-start] 1fr [r3-end];
}
article div:nth-child(2){
grid-row-start: r1-start;
grid-row-end: r2-end;
grid-column-start: c2-start;
grid-column-end: c3-end;
}
|
方法四: 方法三的操作属实反人类，所以这里推荐方法四，直接指定从第几个单元格开始到第几个单元格结束就完了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| article{
margin: auto;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, [c-start] 1fr [c-end]);
grid-template-rows: repeat(3, [r-start] 1fr [r-end]);
}
article div:nth-child(2){
grid-row-start: r-start 1;
grid-row-end: r-end 2;
grid-column-start: c-start 2;
grid-column-end: c-end 3;
}
|
简写
每次都写start和end实在是麻烦，所以可以用简写来代替。
比如:
1
2
3
4
| article div:nth-child(2){
grid-row: 1/3;
grid-column: 2/4;
}
|
“/“号左边代表开始位置，右边代表结束位置。当然，左右也不一定非写数字不可，”c-row 1 / c-row / 2”等也是可以的。
间隙
直接看代码吧，博主困的要死了，不上图了:
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
margin: auto;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
row-gap: 10px;
column-gap: 10px;
}
article div{
border: 1px solid black;
}
article div:nth-child(2){
grid-row: 1/3;
grid-column: 2/4;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</article>
</body>
</html>
|
这里使用了”row-gap”来指定行于行之间的间隙，使用”column-gap”指定列与列之间的间隙。也可以直接使用”gap: 1px 2px”类似的方式来指定间隙，第一个参数是行的间隙，第二个参数是列的间隙。
好了，本篇完(刷牙洗脸睡觉辽)。
