昨天看见阮大神的博客更新Grid布局的相关知识总结,学习相关的知识点

原文链接: 阮一峰-Grid布局


个人练习小demo:
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
<!--
网格Grid布局
-->
<!DOCTYPE html>
<html>
<head>
<title>网格Grid布局</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
display: grid; /*行内的grid布局*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;
grid-auto-flow: row; /*布局基准,按行还是列*/
/* grid-template-areas:'header header header'
'main main aside'
'footer footer footer'; */
/*
align-items:center 设置单元格内容的垂直位置;
justify-items: 设置单元格内容的水平位置;
place-items: 合并简写了上述两个;
place-items: <align-items> <justify-items>;
*/
/*
align-content: 设置整个内容区域在grid容器里的垂直位置;
justify-content: 设置整个内容区域在grid容器里的水平位置;
place-content: 合并前两者; */
}
.item-a{
background-color: pink;
/*从第几条网格线开始,到第几条网格线结束*/
grid-column-start: 1;
/*左边框的起始线*/
grid-column-end: 3;
/* 右边框的结束线 */
/* 同理有上下:grid-row-start; grid-row-end */
/* justify-self: 设置单元格内容的水平位置;与justice-items作用一致,但只控制单个项目;
align-self: 设置单元格内容的垂直位置;与align-items作用一致,但只控制单个项目;
place-self: 前两者的合并写法; */
}
.item-b{
background-color: red;
}
.item-c{
background-color: blue;
/*缩写版:从第几条开始,到第几条结束*/
grid-row: 2/4;
}
.item-d{
background-color: yellow;
grid-column: 2/4;
}
.item-e{
background-color: black;
color: white;
}
.item-f{
background-color: grey;
}
</style>
</head>
<body>
<span>foo</span>
<div class='container'>
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-d</div>
<div class="item-f">item-d</div>
</div>
<span>bar</span>

</body>
</html>

Grid布局