CSS Grid 学习

CSS Grid 网格布局教程

写给自己看的display: 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
<!-- https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html -->
<div class="item">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
</div>
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
.item {
display: grid;
/* grid-template-columns: repeat(auto-fill, 100px); */
/* grid-template-columns: 1fr 2fr; */
/* grid-template-columns: 1fr 1fr minmax(100px, 1fr); */
/* grid-template-columns: 100px auto 100px; */
/* grid-template-rows: repeat(3, 33.33%); */
/* grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; */
/* grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; */
/* grid-template-columns: 70% 30%; */
/* grid-template-columns: repeat(12, 1fr); */
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
/* column-gap: 20px; */
/* row-gap: 20px; */
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'; */
/* grid-auto-flow: row; */
/* grid-auto-flow: row dense; */
place-content: center;
}

.item>div {
/* justify-content: center; */
/* align-items: center; */
display: grid;
place-items: center center;
/* justify-self: center; */
/* align-self: center; */
place-self: center;
}

.item div:nth-child(1) {
background-color: red;
/* grid-column-start: 1; */
/* grid-column-end: 3; */
grid-column-start: span 2;
grid-area: e;
}

.item div:nth-child(2) {
background-color: rgb(65, 107, 175);
/* grid-column-start: 1; */
/* grid-column-end: 3; */
}

.item div:nth-child(3) {
background-color: rgb(81, 231, 81);
}

.item div:nth-child(4) {
background-color: rgb(88, 23, 107);
}

.item div:nth-child(5) {
background-color: rgb(50, 179, 129);
}

.item div:nth-child(6) {
background-color: rgb(24, 70, 52);
}

.item div:nth-child(7) {
background-color: rgb(175, 65, 133);
}

.item div:nth-child(8) {
background-color: rgb(109, 110, 117);
/* grid-column-start: 2; */
/* grid-row-start: 4; */
}

.item div:nth-child(9) {
background-color: rgb(161, 134, 69);
/* grid-row-start: 5; */
/* grid-column-start: 3; */
}

未完待续…

打赏测试