本篇博客简略记录一下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”类似的方式来指定间隙,第一个参数是行的间隙,第二个参数是列的间隙。
好了,本篇完(刷牙洗脸睡觉辽)。