css-grid

,

grid 布局

grid 基本使用

1
<div class="grid"></div>
1
2
3
4
5
6
7
8
9
.grid {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;

  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
}
1
2
3
4
<div class="grid">
  <div class="cell-1"></div>
  <div class="cell-2"></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
.grid {
  display: grid;
  width: 500px;
  height: 500px;
  background-color: #eee;

  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.cell-1 {
  background-color: blue;
  grid-row: 1 / span 3;
  grid-column: 1 / span 2;

  // 对角坐标 (x1, y1)  (x2, y2)
  grid-area: 1 / 1 / 4 / 3;
}

.cell-2 {
  background-color: yellow;
  grid-row: 4 / span 2;
  grid-column: 2 / span 4;
}

grid-area

1
2
3
4
5
6
<div class="grid">
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></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
.grid {
  display: grid;
  width: 540px;
  height: 540px;
  background-color: #eee;

  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);

  grid-template-areas:
    "header header header header header"
    "nav main main main main"
    "nav main main main main"
    "nav main main main main"
    ". footer footer footer .";

  row-gap: 10px;
  column-gap: 10px
}

.cell-1 {
  background-color: blue;
  grid-area: header;
}

.cell-2 {
  background-color: yellow;
  grid-area: nav;
}

.cell-3 {
  background-color: orange;
  grid-area: main;
}

.cell-4 {
  background-color: black;
  grid-area: footer;
}