CSS-007-grid布局

Grid 布局

先画一个网格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <style>
    .container{
      display:grid;
      /* 列方向： 左右 50px 中间自适应 */
      grid-template-columns:50px auto 50px;
      /* 行方向： 上下 50px 中间自适应 */
      grid-template-rows:50px auto 50px;
      height:100vh;
      border:1px solid red;
    }
  </style>
</head>
<body>
<div class="container"></div>
</body>
</html>

gird布局实现 PC页面布局

  • 两栏布局
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
<!DOCTYPE html>
<html>
<head>
  <style>
  .container {
    height: 100vh;
    border:1px solid red;
    
    display:grid;
    grid-template-columns: 10% auto 10%;
    grid-template-rows: 50px auto 50px;
    grid-template-areas: 
      "header header header"
      ". main aside"
      "footer footer footer";
    background:pink;
  }
  .header {
    grid-area: header;
    background:#ddd;
  }
  .main {
    grid-area: main;
    background:red;
  }
  .aside {
    grid-area: aside;
    background:yellow;
  }
  .footer{
    grid-area: footer;
    background:blue;
  }
  </style>
</head>
<body>
<div class="container">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>
</body>
</html>

使用 grid-template 实现上面的需求

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
.container {
    height: 100vh;
    border:1px solid red;
    background:pink;
    
    display:grid;
    /*
    grid-template-columns: 10% auto 10%;
    grid-template-rows: 50px auto 50px;
    grid-template-areas: 
      "header header header"
      ". main aside"
      "footer footer footer";
    */
    grid-template:
      /* 定义header 高度 */
      "header header header" 50px 
      /* 定义 main aside 高度自适应 */
      ". main aside" auto
      /* 定义 footer高度 */
      "footer footer footer" 50px
      /* 定义列的宽度比例 */
      / 10% auto 10%
      ;
  }

横列之间的缝隙

1
2
3
/* 列缝隙的大小 */
grid-column-gap: 10px;
grid-row-gap: 15px;

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
<!DOCTYPE html>
<html>
<head>
  <style>
  .container {
    height: 100vh;
    border:1px solid red;
    
    display:grid;
    /* 定义行 在定义列*/
    grid: 50px auto 50px / 10% auto 10%;
    background:pink;
  }
  .header {
    /*  跨三根线 */
    grid-column: 1 / span 3;
    grid-row:1;
    background:#ddd;
  }
  .main {
    grid-column: 2;
    grid-row:2;
    background:red;
  }
  .aside {
    grid-column: 3;
    grid-row:2;
    background:yellow;
  }
  .footer{
    grid-column: 1 / 4;
    grid-row:3;
    background:blue;
  }
  </style>
</head>
<body>
<div class="container">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>
</body>
</html>

参考