网格布局具体实现 - 翁先森的博客

需求#

类似下图的效果：

需求分析#

这种就是网格布局

父容器的宽自适应，子容器的宽计算公式为 (100% - (n - 1) * 24) / n 。如果页面宽度大于1280px，n等于5，小于1280px时，n等于4，页面最小宽度是960px;

解决方案#

Grid布局#

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
  </head>
8
  <style>
9
    .parent {
10
      display: grid;
11
      grid-template-columns: repeat(5, 1fr);
12
      grid-row-gap: 24px;
13
      grid-column-gap: 24px;
14
    }
15

16
    .children {
17
      background-color: antiquewhite;
18
      height: 20px;
19
    }
20

21
    @media screen and (max-width: 1280px) {
22
      .parent {
23
        grid-template-columns: repeat(4, 1fr);
24
      }
25
    }
26

27
  </style>
28
  <body>
29
    <div class="parent">
30
      <div class="children">
31
        <div class="children-content"></div>
32
      </div>
33
      <div class="children">
34
        <div class="children-content"></div>
35
      </div>
36
      <div class="children">
37
        <div class="children-content"></div>
38
      </div>
39
      <div class="children">
40
        <div class="children-content"></div>
41
      </div>
42
      <div class="children">
43
        <div class="children-content"></div>
44
      </div>
45
      <div class="children">
46
        <div class="children-content"></div>
47
      </div>
48
      <div class="children">
49
        <div class="children-content"></div>
50
      </div>
51
      <div class="children">
52
        <div class="children-content"></div>
53
      </div>
54
      <div class="children">
55
        <div class="children-content"></div>
56
      </div>
57
      <div class="children">
58
        <div class="children-content"></div>
59
      </div>
60
    </div>
61
  </body>
62
</html>