CSS Grid 学习

Posted on Edited on In

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; */
}

未完待续…