Grid布局
1.什么是Grid布局
Flex布局是轴线布局,只能指定”项目”针对轴线的位置,可以看作是一维布局,Grid布局则是将容器划分成”行”和”列”,产生单元格,然后指定项目所在的单元格,可以看作是二维布局,Grid布局远比Flex布局强大
常用的三种布局
传统布局:利用position+display+float属性布局,兼容性最好,但效率低
FlexBox:一维布局方案,有自己的一套属性,效率高,学习成本低,兼容性强
Grid布局:网格布局是最强大的CSS布局方案,但是知识点较多,学习成本相对困难些,目前兼容性不如FlexBox
兼容性
2.基本概念
容器:有容器属性
- 项目:有项目属性
3.容器属性
- grid-template-columns
- grid-template-rows
- row-gap
- column-gap
- gap(上面两个的简写)
- grid-template-areas
- grid-auto-flow
- justify-items
- align-items
- place-items(上面两个的简写)
- justify-content
- align-content
- place-content(上面两个的简写)
- grid-auto-columns
- grid-auto-rows
3.1.grid-template-*
设置Grid布局的行列属性(几行,几列)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
<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>Grid</title>
<style>
* {
margin: 0;
padding: 0;
}
.root {
width: 600px;
height: 600px;
border: 1px solid cadetblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: gold;
}
.item3 {
background-color: aqua;
}
.item4 {
background-color: beige;
}
.item5 {
background-color: blueviolet;
}
.item6 {
background-color: brown;
}
.item7 {
background-color: green;
}
.item8 {
background-color: blanchedalmond;
}
.item9 {
background-color: violet;
}
.item10 {
background-color: thistle;
}
</style>
</head>
<body>
<div class="root">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>repeat():第一个参数是重复次数,第二个参数是需要重复的值
1
2grid-template-columns: repeat(3, 100px); // 重复三次,每个项目100px
grid-template-rows: repeat(4, 100px); // 重复四次,每个项目100pxauto-fill:有时候项目大小是固定的,但是容器大小不确定,这个属性就会自动填充
1
grid-template-columns: repeat(auto-fill, 100px)
fr:为了方便表示比例关系,网格布局提供fr关键字(意为片段)
1
grid-template-columns: repeat(4, 1fr) // 宽度被平均分成4份
minmax():函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值
1
grid-template-columns: 1fr minmax(15px, 1fr)
auto:表示由浏览器自己决定宽度(自适应)
1
grid-template-columns: 100px auto 100px; // 两端固定,中间自适应
网格线:可以用方括号定义网格线名称,方便以后引用
1
grid-template-columns: [c1]100px [c2]100px [c3]100px [c4]
3.2.*-gap
规定网格中行列之间的间距column-gap row-gap grid-gap(row-gap | column-gap)
1 | display: grid; |
3.3.grid-template-area
用来划分模板的区域
1 | grid-template-areas: "a b c" "d e f" "g h i" "j"; |
3.4.grid-auto-flow
规定容器中项目的排列顺序
如果出现如下图位置的情况,为了充分利用空间,可以加上dense属性
3.5.justify-items/align-items
设置单元格内容的水平和垂直的对齐方式
1 | justify-items: start | end | center | stretch; |
place-items
place-items属性是align-items属性和justify-items属性的合并简写
1 | place-items: <align-items> <justify-items> |
3.6.justify-content/align-content
设置整个内容区域的水平和垂直对齐方式
1 | justify-content: start | end | center | stretch | space-around | space-between | space-evenly; |
place-content
place-contend属性是align-contend属性和justify-contend属性的合并简写
1 | place-content: <align-content> <justify-content> |
3.7.grid-auto-columns/grid-auto-rows
用来设置多出来的项目的宽和高
4.项目属性
grid-column-start
grid-column-end
grid-column(上面两个的简写)
grid-row-start
grid-row-end
grid-row(上面两个的简写)
grid-area
justify-self
align-self
place-self(上面两个的简写)
4.1.grid-column-start/grid-column-end/grid-row-start/grid-row-end
用来指定item在网格线中的开始网线和结束网线
简写
1
2grid-column: 1 / 3
grid-row: 1 / 3span写法
规定项目直接占据的行/列数量
1 | grid-column: span 3; // 跨越3列 |
4.2.grid-area
指定项目放在哪一个区域
- 配合容器属性
grid-template-area
使用
- 用做上面四个属性的简写
grid-area属性可以用作grid-row-start,grid-column-start,grid-row-end,grid-column-end的合并简写形式,直接指定项目的位置
1 | /* grid-area: <row-start> / <column-start> / <row-end> / <column-end> */ |
4.3.justify-self/align-self
justify-self属性用来单独设置单元格内容的水平位置,跟justify-items属性的用法完全一致
align-self属性用来单独设置单元格内容的垂直位置,跟align-items属性的用法完全一致
place-self
place-self属性是align-self属性和justify-self属性的合并简写形式
1 | place-self: <align-self> <justify-self> |